React Concurrent Mode는 새로운 렌더링 모드로, 리액트의 렌더링 작업을 더 효율적으로 처리하기 위한 기능입니다. Concurrent Mode는 애플리케이션을 더 자연스럽게 작동하게 만들어 사용자 경험을 개선할 수 있습니다.

렌더링 스케줄링 알고리즘은 Concurrent Mode에서 중요한 역할을 담당합니다. 이 알고리즘은 어떤 컴포넌트를 언제 렌더링할지 결정하는 방식을 제어합니다. React는 기본적으로 “시간 분할(time-slicing)”이라는 알고리즘을 사용하여 작업을 나누고 우선 순위에 따라 렌더링 작업을 조절합니다.

렌더링 작업의 우선 순위는 사용자 상호작용과 관련하여 결정됩니다. 사용자가 애플리케이션과 상호작용할 때, React는 해당 상호작용에 대한 응답성을 유지하기 위해 우선 순위가 높은 작업을 우선 처리합니다. 이는 사용자가 잠시 멈추어 보이지 않는 작업을 중단시킴으로써, 중요한 작업을 빠르게 처리할 수 있도록 합니다.

React Concurrent Mode에서의 렌더링 스케줄링은 다음과 같은 단계로 이루어집니다:

1. 우선 순위에 따라 작업을 스케줄링합니다. 이는 UI 작업을 여러 렌더링 단위로 분할하여 처리하는 시간 분할 알고리즘을 사용하여 이루어집니다.
2. 각 렌더링 단위는 우선 순위에 따라 작업을 처리합니다. 이 때, 사용자 상호작용과 관련된 작업은 우선순위가 더 높지만, 오랜 시간이 걸리는 작업은 나누어 처리되어 응답성을 유지합니다.
3. 작업을 수행하는 동안 일시 중단이 발생하면, 다른 중요한 작업에 우선순위를 할당하여 처리합니다. 이를 “선점(preemptive)”이라고 합니다.
4. 작업이 완료되면 결과를 화면에 업데이트합니다.

React Concurrent Mode의 렌더링 스케줄링 알고리즘은 개발자가 직접 제어할 수는 없지만, 리액트 엔진이 알아서 처리하기 때문에 사용자 경험을 향상시키는데 도움이 됩니다. 더 나은 응답성과 더 빠른 렌더링을 위해 React Concurrent Mode를 사용해 보는 것을 권장합니다.

자세한 내용은 React 공식 문서를 참고하세요.

#react #concurrentmode