state변수를 설정하면 다음 렌더링이큐(queue)에 들어간다.- 그러나 경우에 따라 다음 렌더링을 큐에 넣기 전에, 값에 대해 여러 작업을 수행해보고 싶을 수도 있다.
- 이를 위해
React가state업데이트를 어떻게 배치하면 좋을지 이해하는 것이 도움이 된다.
- state 업데이트 일괄처리
setNumber(number + 1)을 3번 호출하므로 3번 증가한다고 볼 수 있다.- 그러나 각 렌더링의 state 값은 고정되어 있어서,
number값은 항상0이다. React는state업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때 까지 기다린다.- 이 때문에 리렌더링은 모든
setNumber()호출이 완료된 이후에만 일어난다. - 음식점에서 주문을 받는 웨이터를 생각해볼 수 있다.
- 웨이터는 주문이 끝날 때 까지 기다리고, 주문을 변경하며 다른 사람의 주문도 받는다.
- 이렇게 하면 너무 많은 리렌더링을 트리거하지 않고 여러 컴포넌트에서 나온 다수의
state변수를 업데이트 할 수 있다. - 그러나 이는 이벤트 핸들러와 그 안에 있는 코드가 완료될 때 까지 UI가 업데이트되지 않는다는 의미와도 같다.
- 일괄처리(batching) 라고도 하는 이 동작은
React앱을 훨씬 빠르게 실행할 수 있게 도와준다. React는 클릭과 같은 여러 의도적인 이벤트에 대해 일괄 처리하지 않고, 각 클릭은 개별적으로 처리된다.React는 일반적으로 안전한 경우에만 일괄 처리를 수행한다.- ex) 첫 번째 버튼 클릭으로 form이 비활성화되면 두 번째 클릭으로 form이 다시 제출되지 않게 한다.
import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) }
- 다음 렌더링(next render) 전에 동일한 state 변수를 여러 번 업데이트하기
- 다음 렌더링 전에 동일한
state변수를 여러 번 업데이트하고 싶다면setNumber(n => n + 1)과 같이 큐의 이전state를 기반으로 다음state를 계산하는 함수를 전달할 수 있다. n => n + 1을 업데이터 함수(updater function) 라고 한다.React는 이벤트 핸들러의 다른 코드가 모두 실행된 후에 함수가 처리되도록 큐에 넣는다.- 다음 렌더링 중에
React는 큐를 순회하여 최종 업데이트 된state를 제공한다. - 즉 아래와 같이 동작한다.
setNumber(n => n + 1): n => n + 1함수를 큐에 추가한다.setNumber(n => n + 1): n => n + 1함수를 큐에 추가한다.setNumber(n => n + 1): n => n + 1함수를 큐에 추가한다.- 다음 렌더링 중에
useState를 호출하면React는 큐를 순회한다. - 이전
numberstate는0이었으므로 이를 첫 업데이터 함수에n인수로 전달한다. - 그 다음
React는 이전 업데이터 함수의 반환값을 가져와서 다음 업데이터 함수에n으로 전달하는 식으로 반복한다.
state를 교체한 후 업데이트하면 어떻게 될까?- 다음과 같이 동작한다.
setNumber(number + 5): number는0이므로setNumber(0 + 5)이다.React는number를 5로 바꾸기를 큐에 추가한다.setNumber(n => n + 1): n => n + 1는 업데이터 함수이다.- 해당 함수를 큐에 등록한다.
- 다음 렌더링 동안
React는state큐를 순회한다. React는 최종 결과로useState에서6을 반환한다.
import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 5); setNumber(n => n + 1); }}>Increase the number</button> </> ) }
- 업데이트 후
state를 바꾸면 어떻게 될까? React는 다음과 같이 동작한다.setNumber(number + 5):number는0이므로setNumber(0 + 5)이다.React는 “5로 바꾸기” 를 큐에 추가한다.setNumber(n => n + 1):n => n + 1는 업데이터 함수이다.React는 이 함수 를 큐에 추가한다.setNumber(42):React는 “42로 바꾸기” 를 큐에 추가한다.- 정리하면 값을 추가하느냐, 함수를 추가하느냐의 차이가 있다.
import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 5); setNumber(n => n + 1); setNumber(42); }}>Increase the number</button> </> ) }