[React]상태 변경 헷갈리는 비동기 처리 종결

리엑트에서 setState는 호출될 때(코드에서 읽힐 때) 바로 state를 변경하지 않음.
모든 setState를 특정 시점에서 한번에 처리하도록 큐에 저장시켜 놈.

특정 시점에서 큐에 저장된 모든 setState를 실행시킴.

setState는 호출 시점에서 state를 가지고 업데이트하기 때문에 같은 state를 업데이트 시키는 setState는 마지막만 의미가 있음. 이걸 일괄 처리, batch라고 함.
ex)

const [state, setState] = useState(0);
setState(state + 1);
setState(state + 1);
setState(state + 1);

//result: state = 1

 

 

그런데 setState( prev => prev + 1) 이런 식으로 함수형을 이용해서 업데이트하면 호출 시점이 아닌 큐에서 빠져나와 업데이트 되는 시점에서의 state를 가지고 업데이트함. (매개변수 이름은 아무거나 상관없음)

const [state, setState] = useState(0);
setState(prev => perv + 1);
setState(prev => perv + 1);
setState(prev => perv + 1);

//result: state = 3

 

다른 원리가 있는 게 아니라 리엑트 개발팀에서 이렇게 설계한거임.

React의 상태 업데이트 처리 절차

1. setState 호출: 컴포넌트에서 setState가 호출될 때, 이는 즉시 상태를 변경하지 않고, 상태 업데이트를 예약합니다.
2. 예: this.setState({ value: this.state.value + 1 });
3. 일괄 처리를 위한 큐링: React는 성능 최적화를 위해 여러 setState 호출을 큐(queue)에 저장합니다. 이 큐는 상태 업데이트가 실제로 처리될 때까지 대기합니다.
4. 이벤트 핸들링 또는 라이프사이클 완료: 사용자 상호작용 또는 컴포넌트 라이프사이클의 특정 지점에서 React는 큐에 저장된 상태 업데이트를 처리하기 시작합니다.
5. 큐에 있는 상태 업데이트 처리: 큐에 저장된 모든 상태 업데이트(일반적인 setState와 함수형 setState 모두)가 처리됩니다. 여기서 중요한 점은 다음과 같습니다:
   • 일반적인 setState: 이는 setState 호출 시점의 상태 값을 기반으로 상태 업데이트를 계획합니다.
   • 함수형 setState: 각 업데이트는 처리 시점의 최신 상태를 기반으로 새로운 상태를 계산합니다.
6. 상태 업데이트의 결합: React는 큐에 있는 모든 상태 업데이트를 결합하여 최종 상태를 계산합니다. 이 과정은 최적화된 단일 렌더링을 위해 수행됩니다.
7. 렌더링: React는 결합된 최종 상태를 바탕으로 컴포넌트 트리를 렌더링합니다.
8. 컴포넌트 업데이트 완료: 상태 업데이트와 렌더링이 완료되면, 컴포넌트는 업데이트된 상태로 사용자에게 표시됩니다.

 

React에서 setState의 일괄 업데이트(batch update) 방식을 사용하는 이유

React에서 상태(state) 변경이 발생할 때마다 기술적으로는 컴포넌트의 리렌더링이 트리거됩니다. 그러나 React는 성능 최적화를 위해 여러 상태 변경을 일괄 처리하고, 실질적으로 필요한 최소한의 리렌더링만을 수행합

1. 성능 최적화: React는 여러 setState 호출을 일괄적으로 처리함으로써 불필요한 리렌더링을 줄입니다. 이는 특히 복잡한 애플리케이션이나 높은 상태 업데이트 빈도를 가진 애플리케이션에서 성능을 크게 향상시킵니다.
2. 일관된 상태 관리: 비동기적인 상태 업데이트는 상태가 여러 곳에서 동시에 변경되는 것을 방지합니다. 이를 통해 상태의 불일치 문제를 줄이고, 애플리케이션의 상태 관리를 더욱 예측 가능하게 만듭니다.
3. 최신 상태 보장: 함수형 setState를 사용하면 상태 업데이트가 처리되는 시점에서 항상 최신 상태를 기반으로 계산합니다. 이는 상태 업데이트의 종속성과 순서 문제를 해결해줍니다.
4. 렌더링 성능 개선: 상태 업데이트를 일괄 처리함으로써, React는 한 번의 리렌더링으로 여러 상태 변경을 반영할 수 있습니다. 이는 DOM 조작을 최소화하고, 렌더링 성능을 개선합니다.
5. 컴포넌트 업데이트의 효율성: React는 상태 변경에 따른 컴포넌트의 업데이트를 효율적으로 관리합니다. 이는 개발자가 상태 업데이트의 세부적인 처리 방식에 대해 신경 쓰지 않고, 애플리케이션의 로직에 집중할 수 있게 해줍니다.

결론

따라서, 상태 변경마다 리렌더링이 자동으로 발생하지만, 실제로는 React가 이를 효율적으로 관리하여 필요한 최소한의 리렌더링만을 수행하도록 합니다. 이러한 방식은 애플리케이션의 성능과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.