[React] React Hooks (useState)

[useState]

- 가장 기본적인 hook

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

- 카운터, ToDoList

 

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

useState 의 리턴 값은 배열인데, 그 리턴값을 구조분해 할당으로 받아옴.

 

useState 에는 두가지의 업데이트 방식이 있다. 

 

1. 일반형 업데이트 방식

React는 한꺼번에 변경된 내용을 종합해 batch 업데이트를 하기 때문에, 아래의 버튼을 누르면 1씩만 증가함.

렌더링이 잦으면 성능에 이슈가 있는 것이기 때문에 react 는 이 방식을 택함.

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
                        {/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번째 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

 

2. 함수형 업데이트 방식

명령을 모아서 순차적으로 한번 씩 실행하기 때문에, 아래의 버튼을 누르면 3씩 증가함.

함수형 인자 부분에서 현재 state를 받아오고 바뀐 state를 반환, 이 과정을 반복하여 최신 값을 유지할 수 밖에 없음.

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
                        {/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;