[React] ReactDOM.createRoot는 뭘까?

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다.

---

ReactDOM.createRoot???

• React 18에서 새롭게 나온 creatRoot()
• ReactDOM.render()를 대체하고 Concurrent 모드를 활성화 한다.

Concurrent 모드

• 동시성을 향상 시킨다.
• 사용자 경험을 향상 시키는 렌더링 최적화
• 렌더링 최적화를 위해 작업의 우선순위를 결정한다.

사용자의 텍스트 타이핑에 따라 UI가 업데이트되는 검색을 예시를 들어 보겠습니다.타이핑 때마다 UI를 업데이트 하기 위해 UI가 버벅거리거나 과도한 함수를 호출을 하게 된다. 이런 현상을 해결하기 위해 디바운싱, 쓰로틀링 기법을 사용하지만 완벽히 해결은 되지 않는다.

Concurrent 모드는 사용자 경험의 관점에서 이런 작업을 해결 하기 위해 작업에 대한 우선순위를 결정한다. 예시로 든 경우에서는 UI를 업데이트 하는 것 보다 텍스트를 paint 하는 것을 더 우선 순위가 높은 작업으로 취급해 먼저 처리하고 렌더링 되는 작업은 잠시 인터럽트 처리를 한다. 이렇게 함으로써 개발자는 번거로운 디바운싱, 쓰로틀링 기능 구현을 안해도 된다.

 

참고

https://medium.com/swlh/what-is-react-concurrent-mode-46989b5f15da

What is React Concurrent Mode?

https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot

Concurrent 모드 API 참고서 (실험 단계) – React

https://ko.reactjs.org/docs/concurrent-mode-intro.html

Concurrent모드 소개 (실험 단계) – React