React Fiber update queue

개요

오늘은 npm 다운로드가 급감하는 크리스마스.

면접에서 특이한 기억이 남아 글을 쓴다.

질문은 아주 단순했는데, “setState를 세번 연달아 실행시키면, 어떻게 동작할까요?” 였다.

처음 들었을땐 아예 아무 생각이 안들어서 (무슨 답을 원하는지도 감이 안왔다), 모르겠다고 한 후 추가적으로 키워드를 던져주셔서 어찌저찌 이상한 답을 하긴 했었던 걸로 기억한다.

면접이 끝나고 찾아보니 React 공식문서에 대문짝만하게 걸려있는 내용이라 ‘React 공식문서를 한번이라도 유심히 본적이 있으신가요?’ 라는 질문이었구나 라는걸 깨달았다.

참고로 해당 질문의 기술면접 모범 답변은 “setState 함수는 호출시 동기적으로 실행되지 않고 React 업데이트 큐에 들어가며, 상태 업데이트가 다음 렌더링 사이클에서 한번에 실행(batched)되기 때문입니다” 일 것이다.

개발 커리어 3년을 React만 다뤘고, 마음 한켠으로는 ‘나는 리액트 공식문서는 안봐도 다 알아’ 라고 자만하고 있었던 것 같다.

기술면접이나, 팀원 및 동료분들께 React의 기본적인 동작들을 정확하게 설명하기엔 내가 알고있는 지식이 많이 부족하구나 라는걸 뼈저리게 느껴, 이번 포스팅은 기본에 충실해보려 한다.

공식문서도 새로 보니 새롭게 알게된 것도 있고, 리뉴얼한 사이트도 마음에든다(?).

setState가 여러번 일어날때 React는 어떻게 동작하는가

Queueing a Series of State Updates – React

The library for web and native user interfaces

https://react.dev/learn/queueing-a-series-of-state-updates#react-batches-state-updates

토시하나 안틀리고 이 공식문서의 상황에 대해 물어본거였다.

평소 본인에 대한 과대평가와 오만함을 버렸다면 좋은 결과가 있었겠지만, 이런 부족한 부분을 다시금 성찰하기 위해 면접을 보는게 아닐까.

잡담은 여기까지 하고, React에서 setState가 어떻게 동작하는지 간단하고 명확한 예시들로 꽉꽉 눌러담겨져 있으니, 한번 주욱 둘러보기를 권장한다.

내가 생각했을때 핵심은 다음과 같다.

1. React는 setState를 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다.

   → 이벤트 핸들러와 그 안에 있는 코드가 완료될 때까지 UI가 업데이트되지 않는다.

2. setState(5)는 사실 setState(n => 5) 이며, n을 사용하지 않았을 뿐이다.
3. 리액트의 아주 작은 부분을 실제로 구현하면, 이런 모양이다.
   javascript

   function getFinalState(baseState, queue) {
     let finalState = baseState;
   
     for (let update of queue) {
       // setState(n => 5) 모양
       if (typeof update === 'function') {
         finalState = update(finalState);
       // setState(5) 모양
       } else {
         finalState = update;
       }
     }
   
     return finalState;
   }
   
   
   function TestCase({
     baseState,
     queue,
     expected
   }) {
     const actual = getFinalState(baseState, queue);  
     // ...
   }