Hooks - useState

Hooks - useState

가장 기본적인 hook이며,

함수 컴포넌트에서 가변적인 상태를 갖게 함

카운터, Todolist

 

const [state, setState] = useState(초기값);

배열을 구조분해 할당으로 꺼내놓음.

---

함수형 업데이트

 

App.jsx

import { useState } from 'react';
import './App.css';

function App() {

  const [number, setNumber] = useState(0);
  return (
    <>
      <div> Number State : {number} </div>
      <button
        onClick={() => {
          // 기존 업데이트 방법
          // setNumber(number + 1);

          // 함수형 업데이트
          setNumber((curNum)=>{
            return curNum + 1;
          })
        }}
      >
        누르면 up
      </button>
    </>
  );
}

export default App;

---

기존 방식은 배치성으로 처리됨. → 모아서 같은게 3개 있으니 한번 실행됨.

함수형 업데이트는 순처적으로 처리됨.

 

렌더링이 잦다 ↔ 성능이 낮다.