React Concurrent Mode는 React의 새로운 기능으로, 더 나은 사용자 경험과 빠른 업데이트 속도를 제공합니다. 이 모드에서 자바스크립트 실행 순서는 이전의 동기식 렌더링과는 다소 다릅니다. 이번 글에서는 React Concurrent Mode에서의 자바스크립트 실행 순서에 대해 알아보겠습니다.
동기식 렌더링과 비동기식 렌더링
React의 기본 렌더링 모드는 동기식 렌더링입니다. 이는 React가 컴포넌트의 렌더링 작업을 일정한 순서대로 처리한다는 것을 의미합니다. 즉, 각각의 컴포넌트는 순차적으로 렌더링되고, 변경된 부분만 다시 그립니다.
그러나 React Concurrent Mode에서는 비동기식 렌더링이 기본입니다. 이는 React가 여러 컴포넌트를 병렬로 처리하여 성능을 향상시키는 방식입니다. 이 모드에서는 컴포넌트의 렌더링 작업이 중간에 멈추고 나중에 다시 시작될 수 있습니다.
자바스크립트 실행 순서
React Concurrent Mode에서 자바스크립트의 실행 순서는 다음과 같이 동작합니다:
-
초기 렌더링: 컴포넌트의 초기 렌더링 작업은 동기식으로 실행됩니다. 이때 컴포넌트의 state나 props가 변경되면, 해당 컴포넌트와 하위 컴포넌트들의 렌더링이 일시적으로 멈춥니다.
-
일시 중단: 변경된 컴포넌트와 하위 컴포넌트들의 렌더링 작업이 중단되고, 이들은 우선순위에 따라 다시 시작될 때까지 대기 상태에 들어갑니다.
-
우선순위 설정: React Concurrent Mode에서는 우선순위를 기준으로 렌더링 작업을 처리합니다. 화면에 가시적인 컴포넌트가 있는 경우, 이에 우선순위를 부여하여 렌더링을 먼저 처리합니다.
-
작업 재개: 화면에 가시적인 컴포넌트의 렌더링 작업이 완료되면, 우선순위가 낮은 컴포넌트의 렌더링 작업을 재개합니다. 이때 우선순위에 따라 작업이 일시 중단되고 다시 시작될 수 있습니다.
-
커밋: 모든 컴포넌트의 렌더링 작업이 완료되고 변경사항이 반영되면, 이를 실제 화면에 반영하는 커밋 단계가 실행됩니다.
이러한 자바스크립트 실행 순서는 React Concurrent Mode에서의 빠른 업데이트 속도와 부드러운 사용자 경험을 가능하게 합니다.
결론
React Concurrent Mode에서의 자바스크립트 실행 순서는 동기식 렌더링과는 다소 다르며, 비동기식 렌더링을 통해 더 나은 성능을 제공합니다. 이를 통해 React 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.
References:
- React Docs: Concurrent Mode
#React #ConcurrentMode