배치 업데이트(Batch Update)

오늘은 좀 빠른 시간에 TIL을 써보려고 한다.

잊어버릴까봐,,

 

배치 업데이트(Batch Update):

리액트가 더 나은 성능을 위해
여러개의 state 업데이트를 

하나의 리렌더링으로 묶는 것

 

어떤 state를 변경시킬 때 모아서 한꺼번에 처리하는

React만의 알고리즘

 

사용하는 이유

1. 불필요한 리렌더링 방지 (렌더링 최적화)

 

 

<button

        onClick={() => {

          setCount(count + 1);

          setCount(count + 1);

          setCount(count + 1);

        }}

      >

        증가

      </button>

나는 분명히 count를 세 번 써줬다.

 

게다가

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

 

초기값은 0이고

상태 변경 함수에 상태 함수를 1씩 더한걸

총 세 번 해줬으니

버튼을 한 번 클릭했을 때 3씩 커지겠지

했는데 웬걸 +1 밖에 커지지 않았다..

 

알고보니 배치 업데이트 때문이었다.

즉,  효율적으로 상태를 업데이트하기 위해

set을 하기위한 것들을 모아 한 번에 처리하는

친구 때문이었다..

 

그러면

    <button

        onClick={() => {

          setCount(count + 1);

          setCount(count + 1);

          setCount(count + 1);

        }}

      >

        증가

      </button>

 

이 코드들을 동일 요청으로 판단하여

한 번만 업데이트를 해주는 것이다.

그래서,

setCount를 100번, 1000번 명령을 내려도

결국은 한 번만 실행하게 되는 것이다.

 

반면에,

 <button

        onClick={() => {

          setCount((prev) => prev + 1);

          setCount((prev) => prev + 1);

          setCount((prev) => prev + 1);

        }}

      >

        증가

      </button>

이 함수형 업데이트 실행 방식은

만약 이렇게 세 번 명령을 내리게 된다면

이 명령을 모아 순차적으로 실행시킨다.

(prev의 값은 초기값이고,

이름은 꼭 prev가 아니어도 된다)

순서는

맨 처음 prev의 값이 0인데

prev + 1을 통과해

prev의 값은 1이 됐다.

그래서 두번째 줄의 prev는 1이다.

두번째 줄의 prev도 prev + 1을 통과해

2가 됐고 그대로 세번째 줄의 prev로 이동한다.

그렇게 또 (세번째 줄의) prev + 1을 통과해서

최종적으로 버튼을 한 번 클릭했을 때

3이 증가하여 return이 되는 것이다.

 

이 함수형 업데이트는 

반복적인 요청을 실행해야 할 때

사용하는 것이 좋다고 한다.