리액트에서 setState
를 사용하여 상태를 업데이트할 경우, 업데이트 된 상태는 즉시 반영되지 않는다. 왜냐하면 setState
는 비동기적으로 작동하기 때문이다.
즉, 리렌더링이 된 후에야 비로소 업데이트된 state가 반영된다.
( state 변경 → 리렌더링 → state 반영 )
리액트의 state를 업데이트하는데 있어서, 비동기적으로 작동하는 여러개의 state를 다룰 때 퍼포먼스 측면에서, 성능면에서 유리하다.
동기적으로 작동했다면 state1 업데이트- state2 업데이트... 이런 식으로 하나씩 업데이트가 될테이 말이다.
여러 state를 동시에 업데이트 하는 경우, 리액트는 state를 batching하여 업데이트를 진행한다.
( batching : 전달된 오브젝트들을 하나로 합치는 작업, 일괄처리 )
batching은 object composition 이라고도 불린다.
JavaScript 코드로 object composition을 살펴보면 아래와 같다.
const singleObject = Object.assign({},
objectFromSetState1,
objectFromSetState2,
objectFromSetState3
);
React의 batching 예제
const [value, setValue] = useState(0);
setValue(value + 1);
setValue(value + 1);
setValue(value + 1);
// Expected value: 3
// Result value: 1
이러한 특성 때문에 업데이트된 state를 즉시 반영해야 할 때, 우리는 useEffenct()
를 사용한다.