React를 사용하다보면 접하게 되는 cocurrent mode에 대해 파헤쳐 보자
2022년에 나온 React 18에서 등장한 Concurrent Mode (동시성 모드)는 무엇일까?
오늘은 이 개념에 대해 알아보도록 하자.
리액트의 동시성 모드란?
: UI 렌더링의 응답성과 효율성을 높이기 위해 도입된 렌더링 방식이다.
기존의 렌더링 모델은 동기적으로 작업을 처리했지만, 동시성 모드에서는 작업을 중단 또는 재개할 수 있으며 우선순위를 매겨 효율적으로 작업을 처리할 수 있다!
-> 더 부드럽고 즉각적인 반응의 애플리케이션 경험 (반응성과 성능 향상)
동시성 모드의 주요 특징은 뭘까?
1. 비동기 렌더링
: 리액트는 렌더링 작업을 한 번에 끝내기보다는 필요에 따라 나눠 처리한다.
렌더링 중이더라도 더 중요한 작업(우선순위)이 생기면 중단하고, 해당 중요 작업을 먼저 처리하고 렌더링 작업을 이어한다.
이의 예시로는 아래와 같다.
-> 사용자가 스크롤을 하는 동안 배경 데이터가 로드될 때, 스크롤 동작을 우선 처리해 화면이 끊기지 않게 함
2. 우선순위 기반 작업 처리
: 작업의 긴급도를 평가하여 높은 우선순위의 작업을 먼저 처리한다.
높고 낮은 우선 순위의 예시는 다음과 같다.
높은 우선순위: 사용자 입력, 애니메이션
낮은 우선순위: 비동기 업데이트, 백그라운드 데이터 로드
-> 사용자 경험이 중단되지 않고 백그라운드에서 다른 작업 처리!
3. 중단 및 재개
: 렌더링 작업을 중단하고 나중에 이어서 처리가 가능하다.
-> 브라우저가 다른 중요한 작업(우선순위 작업)을 먼저 수행하도록 함
4. Suspense와 통합
: Suspense는 데이터를 기다리는 동안 로딩 UI를 보여준다.
-> 네트워크 요청의 데이터를 가져오는 동안 로딩 UI를 보여줌으로써 높은 우선순위는 로딩 UI, 낮은 우선순위는 데이터 요청이 되겠다.
동시성 모드의 장점은 어떤 것들이 있을까?
1. 부드러운 사용자 경험 제공
: 사용자 입력과 같은 중요한 작업(우선순위 작업)이 지연되지 않아 부드러운 경험
2. 대규모 애플리케이션 최적화
: 복잡한 데이터 렌더링 및 상태 업데이트 작업에서도 성능 저하가 없음
-> 작업을 우선순위에 따라 처리하기 때문
3. 비동기 작업 처리 개선
: 데이터를 서버에서 가져오는 등 비동기 작업을 더 쉽게 관리하며 UI 상태를 효과적으로 처리
-> Suspense나 Transition API 사용
동시성 모드는 어떻게 활성화 될까?
React 18 이상에서 index.js 같은 App을 render하는 파일 내 createRoot를 통해 활성화 됨
-> React 18 이상에서 ReactDOM.createRoot 사용시 동시성 모드 기본 활성화
(일부 라이브러리는 동시성 모드와 호환되지 않을 수도 있음)
동시성 모드의 주요 API인 Suspense와 Transition 코드를 확인해보자
1. Suspense
: 비동기 작업을 기다리는 동안 로딩 UI
-> Suspense는 lazy와 함께 쓰인다.
2. Transition API
: 개발자가 직접 우선순위를 지정하고 사용자 경험 최적화 가능
-> 상태 업데이트를 "긴급"과 "전환"(transition)으로 분류
(긴급한 업데이트(urgent updates: 입력, 클릭)는 즉각 처리, 덜 중요한 업데이트(transition updates: 화면 데이터 갱신)는 전환 작업으로 처리)
1. useTransition 훅을 사용하여 구현
-> Transition 상태 관리
2. isPending은 Transition이 진행 중인 상태를 나타냄
-> isPending을 이용하여 true면 보여줄 로딩 또는 스피너 UI 구현 가능 :)
3. startTransition은 상태 업데이트를 Transition으로 처리하는 함수
버튼 클릭이나 사용자 입력같은 긴급 작업은 즉시 처리하고, 데이터 생성 및 렌더링 같은 비우선순위 작업은 transition으로 처리하여 우선순위를 낮게 만든다!
언제 Transition을 사용하는지?
-
대용량 데이터가 화면에 렌더링 될 때 -> 필터링된 리스트 또는 페이지네이션
-
비동기 데이터 로드와 같은 긴 시간 작업이 포함된 상태 업데이트
-
화면 전환 시 중요한 사용자 입력 지연 방지
concurrent render에 대해 공식적으로 설명된 문서는 아래 첨부하겠음!
https://legacy.reactjs.org/blog/2022/03/29/react-v18.html
