useDeferredValue TIL

리액트 공식 문서를 읽다가

 

useDeferredValue로 인한 백그라운드 리렌더링은 화면에 커밋될 때까지 Effects를 실행하지 않습니다. 백그라운드 리렌더링이 일시 중단되면 데이터가 로딩되고 UI가 업데이트된 후에 해당 Effects가 실행됩니다.

 

이 부분이 이해가 되지 않았다. 우선 화면에 커밋된다는 건 뭐지..? 했는데, 생각해보니 예전에 [ 학습하기- 상호작용 더하기 - 렌더링 그리고 커밋 ] 부분에서 

 

1. 렌더링 트리거 (손님의 주문을 주방으로 전달)

2. 컴포넌트 렌더링 (주방에서 주문 준비하기)

3. DOM에 커밋 (테이블에 주문한 요리 내놓기)

 

이 과정에 대해서 배운 적이 있었다. 

아 그러면, UI 가 어떤 값에 의해 업데이트 될 때까지 Effects 가 실행되지 않는 거구나. 라는 것을 알게 되었다. 

 

다음으로 Effects 란 무엇인가..! 가 헷갈렸다. 이때 헷갈렸던 이유는, 나는 [데이터가 로딩되고]의 데이터가 당연히 서버로부터 fetch 해온 데이터라고 생각했는데, 그게 아니고 이 데이터는 search field 같은 곳에 사용자가 입력해서 바뀐, 클라이언트 데이터였다. 

 

즉 해당 문장이 의미하는 바는, useDeferredValue 는 클라이언트 데이터가 완벽히 트리거, 렌더링되고 커밋된 후에 비로소 useDeferredValue 가 실행된다는 것이었다..!! 

 

이렇게 공식 문서 한 문장을 제대로 이해하기 위해 노력하는 과정.. 힘들고 귀찮지만 분명 의미있는 일이라 생각한다..! 앞으로도 공식 문서 꼼꼼히 읽어야지 :)