함수형 업데이트

상태 변경 함수 내부에 값을 직접 넣어도 되지만 함수를 넣어 함수형 업데이트를 구현할 수 있다.

import React from "react";
import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  // 상태 변경 함수 setCount에 인자를 함수를 넣었다.
  const handlePlus = () => {
    setCount((prev) => {
      return prev + 1;
    });
  };
  return (
    <div>
      {count}
      <button onClick={handlePlus}>증가</button>
    </div>
  );
};

export default App;

증가 버튼을 눌러도 잘 작동하는 모습이다.

상태 변경 함수 인자에 값을 직접 할당하는 것과 함수를 할당하는 것의 차이점

반복해서 사용할 경우 차이점이 발생한다.

import React from "react";
import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      {count}
      <button
        onClick={() => {
          setCount(count + 1);
          setCount(count + 1);
          setCount(count + 1);
        }}
      >
        증가
      </button>
    </div>
  );
};

export default App;

증가 버튼을 한 번 누른 결과다.
setCount가 3개있지만 1만 오른 것을 알 수있다.

import React from "react";
import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      {count}
      <button
        onClick={() => {
          setCount((prev) => prev + 1);
          setCount((prev) => prev + 1);
          setCount((prev) => prev + 1);
        }}
      >
        증가
      </button>
    </div>
  );
};

export default App;

이번에는 증가 버튼을 한 번 눌렀는데 3이 오른 것을 볼 수 있다.

가장 큰 차이점이다!

• 값을 직접 입력할 경우 Batch Update로 인해 state가 일괄로 변경된다.
• 반면 함수를 입력할 경우 prev인자값이 순차적으로 증가한다.

차이점이 발생한 원인은 리액트는 Batch Update라는 개념 때문이다.
Batch Update: state를 변경 시킬 때 일괄로 처리하는 리액트만의 알고리즘

• Batch Update 하는 이유
  • 성능 및 최적화 때문이다.
  • 불필요한 리렌더링을 방지하기 위해 state에 변경 사항을 일괄로 처리한다.
  • 여러 side effect를 방지하기 위해서 함수형 업데이트를 사용해도 괜찮다.

하루를 마치며

오늘은 설날이다. 설날이라 기분이 좋았다. 맛있는 것도 많이먹고 오랜만에 휴식하는 시간을 가졌다. 12시간씩 매일 컴퓨터 앞에 있다 바깥바람도 쐬고 부모님이랑 시간을 보냈다. 그렇다고해서 공부를 아예 안하면 안된다. 그래서 올림픽 메달 트래커와 리액트 숙련 강의를 듣고 잘 것이다. 내일까지 연휴이기 때문에 마지막 날인 만큼 불태울 것이다.