동시성 모드(Concurrent mode)에 대해서 알아보자

오늘은 제가 매일매일 확인하는 메일매일 질문에서 동시성 모드라는 것이 왔는데 제대로 아는 것이 없어서

오늘 알아보고자 이렇게 글을 써보게 되었습니다

---

동시성 모드(Concurrent mode)란?

여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능입니다

 

예전 리액트는 스택 구조로 이루어져 있습니다

현재는 Fiber 구조로 이루어져 있어서 동시성 모드로 중간에 멈추거나 작업을 잠시 뒤로 미뤄둘 수 있게 되었습니다

 

동시성 모드를 사용하면 더 부드럽고 즉각적인 반응의 애플리케이션 경험을 줄 수 있습니다

반응성과 성능이 향상됩니다

 

특징

1. 비동기 렌더링

한 번에 끝내지 않고 필요에 따라 나누어 처리합니다

중요한 작업이 생기면 중단, 해당 중요 작업을 먼저 처리 후 렌더링 작업 이어하기

예시) 사용자가 스크롤 하는 동안 데이터가 로드될 때 스크롤 동작을 우선 처리해 화면이 끊기지 않게 합니다

 

2. 우선순위 기반 작업 처리

작업의 긴급도를 평가하여서 높은 우선순위의 작업을 먼저 처리합니다

예시) 높은 우선순위: 사용자의 입력, 애니메이션/낮은 우선순위: 비동기 업데이트, 백그라운드 데이터 로드

 

3. 중단 및 재개

렌더링 작업을 중단하고 나중에 이어서 처리가 가능합니다

브라우저가 다른 중요한 작업을 먼저 수행하도록 합니다

 

4. Suspense와 통합

Suspense는 데이터를 기다리는 동안 로딩 UI를 보여줍니다

네트워크 요청 데이터를 가져오는 동안 로딩 UI를 보여주는데 높은 우선순위는 로딩 UI 낮은 우선순위는 데이터 요청입니다

---

실사용

리액트 버전 18부터는 기본적으로 concurrent mode가 적용되게 되어있지만 createRoot를 하지 않으면 lagacy mode가 됩니다

동시성 모드를 사용하면 리액트 18 버전에서 동시성 렌더링을 제공하는 새로운 기능을 사용할 수 있습니다

대표적으로는 useTransition과 useDeferredValue 훅이 있습니다

useTransition

이 훅을 사용하면 isPending과 startTransition을 반환합니다

Transition마다 우선순위가 존재하며 불필요한 렌더링은 건너뛰고 마지막 상태만 반영합니다

• isPending: 현재 상태가 업데이트가 진행중인지 끝나서 보여줄 준비가 됐는지 판단 (boolean)
• startTransition: 콜백함수를 인자로 받고 콜백함수 안에서 우선순위를 낮춰 렌더링할 setState 함수 실행 (function)

useDeferredValue

startTransition는 콜백함수 내부에 setState를 사용해야 하지만 useEfferredValue는 state값을 인자로 받아서 지연된 값을

return 합니다 업데이트 중에 먼저 이전 값을 보여주고 백그라운드에서 업데이트가 왼료되면 새 값으로 다시 렌더링을 시도합니다

어떨 때 사용할까?

필요한 경우는 주로 사용자와의 상호작용이 빈번하고 응답성이 중요한 경우입니다

검색 필터링, 자동완성 같은 기능이 예로 있고 무거운 데이터나 리스트를 로딩하는 경우 유용합니다

그리고 또한 애니메이션이 포함된 화면 전환이나 중요도가 높은 사용자 입력작업도 좋습니다

---

글을 마치며

이렇게 동시성 모드에 대해서 알아보았는데 이런 mode에 존재도 모르고 사용해왔던 저에게 한 번 더 놀랐습니다

궁금증은 가진 적이 있었는데 더 파보려고 하지 않았습니다 

다음부터는 항상 호기심을 가지고 탐구하려는 자세를 가져야겠다고 생각했습니다