중요한 데이터 아니면 state에 담기

변수 말고 state를 사용하는 이유
변수와 달리, state는 변동사항이 생기면 자동으로 재랜더링 해줍니다.

쉽게 말해서 자주 바뀔 것 같은 것은 state를 사용하면 편리하며, 
1. 변경할 일이 거의 없는 데이터
2. 굳이 html에 표시할 필요가 없는 사항들에 대해서는 state 말고 변수를 사용해도 무방하다.

state 사용방법
1.useState라고 치고 엔터키를 누르면, 자동으로 import {useState} from 'react' 표시

function App(){
 
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

(App.css)

div {
  box-sizing : border-box
}
.list {
  text-align : left;
  padding-left : 20px;
  border-bottom : 1px solid grey;
}

import { useState } from 'react'; -> state를 사용하고자 한다면, 위에 써야된다.
import './App.css'

function App(){
 
  let [a,b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

let [a,b] = useState('남자 코트 추천');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다.

let array = ['Kim', 20];

let name = array[0];
let age = array[1];

let [name, age] = ['Kim', 20]

위, 아래 방법 모두 가능하다.

function App(){
 
  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

변수 말고 state에 데이터 저장해서 쓰는 이유
state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다

import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
function App() {

  let post = "강남 우동 맛집"
  // let[글제목,b]=useState('남자 코트 추천');
  // let[글제목2,c]=useState('여자 코트 추천');
  // let[글제목3,d]=useState('파이썬독학');

  let[글제목,b]=useState(['남자코트 추천','강남 우동맛집','파이썬독학'])

  return (
    <div className="App">
     <div className ="black-nav">
      <h4 style={{color:'red', fontSize :'16px'}}>블로그임</h4>
     </div>

     <div className = "list">
      <h4>{글제목[0]}</h4> -> []에서 가져올 것을 지정해줘도 상관 없음
      <p>2월 17일 발행</p>
    </div>
      
      <div className = "list">
      <h4>{글제목[1]}</h4>  -> []에서 가져올 것을 지정해줘도 상관 없음
      <p>2월 17일 발행</p>
     </div>

     <div className = "list">
      <h4>{글제목[2]}</h4> -> []에서 가져올 것을 지정해줘도 상관 없음
      <p>2월 17일 발행</p> 
      </div>

    </div>
  );
}

export default App;