TIL.231109 React숙련

React Hooks - useState

• 가장 기본적인 hoot
• 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함
• 카운터, Todolist

`기본형태` cosnt[state,  setState] = useState(초기값);

📌만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다

함수형 업데이트

- 함수형 업데이트란?

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

위 코드와 같이 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다.
예시⬇️

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것
setState((currentNumber)=>{ return currentNumber + 1 });

기존방식과 함수형 업데이트의 차이점

기존방식⬇️

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;

함수형업데이트방식⬇️

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;

위 예시와 같이 기존방식으로 3번 호출했을때에는 number가 1씩 증가했으며 함수형업데이트방식으로 동일하게 작동하였을 시 number가 3씩 증가했다.

💡 다르게 동작하는 이유

일반 업데이트 방식은 버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 있는 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리! 즉 우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행 시킨다고한다. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행된다.
함수형 업데이트 방식은 3번을 동시에 명령을 내리면 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다. 0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3 보여지게 된다.

☑️useState의 업데이트 방식은 2가지 방식이 있으며, 각각 다르게 동작한다.