리액트 Batching / TIL#14

1. 배칭개념 소개
   - 예시 설명

배칭 (Batching)

- 개념 소개

배칭이란, 성능 개선을 목적으로 하는 리액트의 동작하는 방식이다.

실행되는 함수 내에 상태(state)를 업데이트하는 modifier 함수가 여러 개 존재한다면 개별로 렌더링이 일어나지 않고 합쳐서 렌더링이 일어난다.

- 예시 설명

<script>
	const [count, setCount] = useState(0);
    
    const clickHandler = () => {
    	setCount(count + 1); // 실행은 되지만 렌더링은 일어나지 않는다.
        setCount(count + 1); // 실행은 되지만 렌더링은 일어나지 않는다.
        setCount(count + 1); // 실행은 되지만 렌더링은 일어나지 않는다.
    } // 함수가 모두 실행되고 나서 렌더링이 한번만 일어난다.  
</script>

리액트의 배칭 기능 때문에 위의 결과 값은 함수가 세번 실행된 값 3이 아닌 1이며
클릭할 때마다 값이 1씩 증가하게 된다.

클릭핸들러 함수 내 modifier함수가 실행은 되지만 바로 렌더링이 일어나지 않기 때문에 실행 시 더해지는 count 상태 값은 변하지 않기 때문이다.

반면에 modifier 함수 내에서 콜백함수를 사용하면 실행 값은 3이 되고
클릭할 때마다 값은 3씩 증가한다.

<script>
	const [count, setCount] = useState(0);
    
    const clickHandler = () => {
    	setCount((cur) => cur + 1); // 렌더링과 상관없이 값이 변경된다.
        setCount((cur) => cur + 1); // 렌더링과 상관없이 값이 변경된다.
        setCount((cur) => cur + 1); // 렌더링과 상관없이 값이 변경된다.
    } // 함수가 모두 실행과정에서 총 3번 값이 더 해지고 렌더링된다. 
</script>

렌더링에 따라 변화는 count 값이 아닌 modifier 함수 내 값 자체를 더하기 때문에 함수가 실행되며 값은 차례로 더해지게 된다.