useState

useState

// (App.js ...)
import { useState } from 'react';
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>
  )
}

맨 윗줄에 import { useState } from ‘react’ 하고

원하는 곳에서 useState(’보관할 자료’) 쓰면 state에 자료를 잠깐 저장할 수 있습니다.

나중에 쓰고 싶으면 let [a, b] = useState(’남자 코트 추천’);

• a의 자리는 state 이름을 작명

useState( )를 쓰면 그 자리에 [데이터1, 데이터2] 의 array가 남는다.

데이터1 자리엔 ‘남자 코트 추천’ 같은 자료가 있고,

데이터2 자리엔 state 변경을 도와주는 함수가 들어있다.

변수 말고 state에 데이터 저장해서 쓰는 이유

state는 변동사항이 생기면 state를 쓰는 html도 자동으로 재렌더링 해줍니다.

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 { 데이터바인딩 } 한다.

1. 변경할 일이 없는 데이터들
2. 굳이 html에 표기가 필요 없는 데이터들은 그냥 변수에 저장