setState에서 prevState를 사용하는 이유가 무엇인가요?

setState 메서드에서 prevState를 사용하는 이유는 상태 업데이트가 비동기적일 수 있기 때문입니다. React는 상태 업데이트를 배치(batch)로 처리하고, 연속적인 setState 호출이 즉시 반영되지 않을 수 있습니다. 따라서 이전 상태를 직접 참조하여 안전하게 상태를 업데이트하려면 prevState를 사용해야 합니다.

setState의 사용 방식

setState 메서드는 두 가지 형태로 사용될 수 있습니다:

1. 객체 형태: setState({ key: value })
2. 함수 형태: setState((prevState, props) => ({ key: value }))

두 번째 형태에서 setState 함수의 콜백 함수는 이전 상태(prevState)와 현재 속성(props)을 전달받습니다. 이전 상태를 직접 참조하여 안전하게 상태를 업데이트할 수 있습니다.

prevState를 사용하는 이유

prevState를 사용하는 이유는 다음과 같습니다:

1. 정확한 상태 업데이트: React의 상태 업데이트는 비동기적으로 처리되기 때문에 setState 메서드 호출 시점에 상태가 예상한 대로 업데이트되지 않을 수 있습니다. prevState를 사용하면 항상 이전 상태를 기반으로 최신 값을 계산하여 업데이트할 수 있습니다.

2. 상태 의존성 처리: 상태 업데이트가 서로 의존적인 경우 prevState를 사용하여 이전 상태에 기반하여 새로운 상태를 계산할 수 있습니다. 이전 상태를 기반으로 상태를 업데이트하면 의존성이 있는 연산을 안전하게 수행할 수 있습니다.

3. 연속적인 업데이트 처리: 여러 번의 setState 호출이 발생하는 경우 prevState를 사용하여 이전 상태를 기반으로 여러 번의 연속적인 업데이트를 수행할 수 있습니다. 각 setState 호출에서 이전 상태를 사용하면 마지막 상태를 기반으로 한 번의 업데이트만 수행되는 것이 아니라 여러 번의 연속적인 업데이트를 순차적으로 처리할 수 있습니다.

따라서 prevState를 사용하면 상태 업데이트의 정확성과 의존성 처리를 보장하며, 비동기적인 상태 업데이트에서 예상치 못한 문제를 방지할 수 있습니다.

배치(Batch)의 개념

React에서 "배치(batch)"는 여러 상태 업데이트를 하나의 작업 단위로 묶어 처리하는 것을 의미합니다. 상태 업데이트는 React에서 비동기적으로 처리되며, 여러 번의 setState 호출이 동시에 발생할 때 각각의 업데이트를 즉시 반영하지 않고, 내부적으로 한 번에 처리됩니다.

배치 처리 과정

React는 성능과 퍼포먼스를 향상시키기 위해 상태 업데이트를 배치로 처리합니다. 여러 번의 setState 호출이 연속적으로 실행될 때, React는 이를 최적화하기 위해 다음과 같은 과정을 거칩니다:

1. 여러 번의 setState 호출을 수집합니다.
2. 업데이트된 상태를 병합하고, 컴포넌트의 업데이트를 예약합니다.
3. React는 이벤트 루프의 다음 틱에서 업데이트를 처리하고, 컴포넌트를 다시 렌더링합니다.

배치 처리 장점

이러한 배치 처리는 성능을 향상시키고 불필요한 렌더링을 최소화하는 데 도움을 줍니다. 여러 번의 상태 업데이트를 한 번의 렌더링으로 처리하여 성능 향상과 효율적인 업데이트를 가능하게 합니다.

배치 처리 예시

예를 들어, 다음과 같이 여러 번의 setState 호출이 발생하는 경우:

this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

React는 이를 한 번의 업데이트로 처리하여 최종적으로 count를 2로 증가시킵니다. 이를 "배치로 처리한다"고 말합니다. 이와 달리 동기적으로 setState를 호출한 경우, 각각의 setState 호출에 대해 컴포넌트가 다시 렌더링되고, 최종 결과가 예상치 않게 될 수 있습니다.