[리액트문서보기][본문 보단..단어를 더 찾아본] state 업데이트 큐[batching,State Queue ]

 

 

◼ 요약 

• state를 설정하더라도 기존 렌더링의 변수는 변경되지 않으며, 대신 새로운 렌더링을 요청합니다.
• React는 이벤트 핸들러가 실행을 마친 후 state 업데이트를 처리합니다. 이를 batching 이라고 합니다.
• 하나의 이벤트에서 일부 state를 여러 번 업데이트하려면 setNumber(n => n + 1) 업데이터 함수를 사용할 수 있습니다.

 

 

 

[참고]
https://react.dev/learn/queueing-a-series-of-state-updates

https://www.youtube.com/watch?v=h4puoo_XhPM&list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v&index=20

---

 

state 업데이트 큐는 본문보다는 단어가 뜻하는 것을 이해하지 못해 단어를 핵심적으로 찾아 보았습니다.

 

 

◼ State  batching  

React에서의 state batching은 여러 개의 state 변경을 모아서 한 번에 처리하는 것을 의미합니다.

 

예를 들면, 한 명이 여러 종류의 샌드위치를 여러 번으로 나누어 주문 하게 되면, 주문을 받은 직원은 각각의 샌드위치 주문을 받은 대로 준비할 수 있습니다. 그렇게 주문을 받으면 처리되는 시간이 더 걸릴 수 있습니다.

대신에, 한번에 주문을 받게 된다면 재료를 한꺼번에 준비하고, 그 다음에 주문된 샌드위치를 차례대로 만들 수 있습니다. 이렇게 함으로써 시간과 노력을 절약할 수 있습니다.

React에서도 비슷한 개념이 적용됩니다. 여러 개의 setState 호출이 있을 때 React는 이들을 한꺼번에 처리하여 성능을 향상시킵니다. 이렇게 함으로써  state 변경 사항이 발생할 때 불필요한 재랜더링을 줄이고, 컴포넌트를 효율적으로 업데이트할 수 있습니다. 요약하자면, state batching은 React에서 여러 state 변경을 모아서 한꺼번에 처리하여 성능을 최적화하는 방법입니다.

 

 

 

리액트 컴포넌트가 업데이트되는 시나리오

• Props 변경: 부모 컴포넌트로부터 전달되는 props가 변경되면 컴포넌트가 다시 렌더링됩니다.
• State 변경: 컴포넌트의 state가 setState 함수를 통해 변경되면 해당 컴포넌트가 다시 렌더링됩니다.
• 부모 컴포넌트의 리렌더링: 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링됩니다.
• 컴포넌트 생명주기 메서드 호출: 컴포넌트의 생명주기 메서드 (componentDidUpdate)가 호출됩니다.
• 컨텍스트(Context) 변경: 컴포넌트가 참조하는 컨텍스트(Context)의 값이 변경되면 해당 컴포넌트가 다시 렌더링됩니다.
• 라우팅 변경: React Router 등을 사용하여 페이지 간 이동이 발생하면 새로운 라우트에 해당하는 컴포넌트가 렌더링됩니다.

 

---

 

 

◼ React State Queue란? 

React에서 상태를 업데이트하려면 setState 함수를 사용합니다. 이때, React는 상태 업데이트를 처리하는데, 이 과정에서 상태 큐를 사용합니다. 상태 큐는 업데이트된 상태들을 일시적으로 보관하는 장소입니다.

 

React는 상태가 변경될 때 상태를 업데이트하고 컴포넌트를 다시 렌더링하기 위해 내부적으로 여러 단계를 거칩니다. 이러한 단계 중 하나가 상태 큐입니다.

일반적으로, React 컴포넌트에서 setState 함수를 호출하면, 해당 상태 업데이트는 상태 큐에 추가됩니다. React는 이 상태 큐에 있는 업데이트들을 일괄적으로 처리하여 렌더링을 수행합니다. 이러한 일괄 처리는 React의 성능을 향상시키는 데 도움이 됩니다.

또한, React는 상태 업데이트를 비동기적으로 처리하기도 합니다. 따라서 setState 호출이 즉시 상태를 변경하지 않을 수 있습니다. 대신에, React는 상태 업데이트를 일정 시간 이후에 또는 다음 렌더링 사이클에서 처리할 수 있습니다.

결론적으로, React State Queue는 React가 상태 업데이트를 처리하는 내부 메커니즘 중 하나로, 상태 업데이트를 일괄적으로 처리하여 성능을 최적화하는 역할을 합니다

 

[큐 상황 만들기 예시 코드]

const [value, setValue] = useState(0);

const result = () {
    setState(42);
    setState((prev)=> prev+1);
    setState(value + 1);
    console.log(value); // 출력:0
}
console.log(value); // 출력:1

 

 

 

[큐에 담기는 과정 설명]

• setState(42) 호출은 상태를 직접 42로 설정합니다. 이는 현재 상태와 관계 없이 새로운 값을 설정하는 것입니다.
• setState((prev) => prev + 1) 호출은 이전 상태를 기반으로 상태를 1 증가시킵니다. 이전 상태를 사용하여 업데이트하는 함수가 전달되었기 때문에, 이전 상태를 기반으로 상태를 변경합니다
• setState(value + 1) 호출은 현재 상태의 값을 가져와서 1을 더한 값을 상태로 설정합니다. 이는 현재 상태를 사용하여 새로운 값을 계산하는 것입니다.
• 마지막으로 모든 업데이트된 값을 모두 큐에 저장 합니다.

// 큐에 담긴 값 (배열로 되어 있습니다)
[42, prev + 1, num + 1]

 

 

 

[큐에 담긴 값 출력 과정]

모두 큐에 저장된것을, React는 이를 일괄적으로 처리합니다. 가장 마지막에 적용된 값이 현재 상태로 설정되며, 따라서 마지막으로 적용된 setState 호출에 의해 상태가 변경됩니다.

따라서 마지막으로 적용된 setState(value + 1) 호출에 의해 상태가 변경되며, 이 상태가 출력됩니다.