Recoil에 대해 공부하다가 Concurrent Mode라는 것을 접하게 되었다. 동시성 모드가 어떤 건지 의문점이 들어 이 글을 작성하게 되었다.

"동시성" 이란?

• Javascript는 단일 스레드 언어이지만 두 가지 이상의 작업을 진행할 수 없다는 의미는 아니다.
• 만약 차 한잔와 토스트를 먹으려 한다면 차를 다 끓인 후에 토스트를 만드는 것은 차가 식어버릴 것이며 이것은 비효율적이다.
• 이때 효율적으로 두 작업을 나누어 적합한 순서대로 일을 처리한다면 더 효율적으로 차와 토스트를 만들 수 있다.
• 이와 같이 동시성(Concurrency)이란 프로그램을 독립적으로 실행 가능한 조각으로 나누어 구성해 단일 스레드의 한계를 깨고 효율적으로 애플리케이션을 만드는 방법이다.

Concurrent Mode의 필요성

• 지금까지의 React는 조정 단계(reconciliation phase)가 시작되면 완료될 때까지 중지가 불가능해 기본 UI 스레드는 사용자 입력과 같은 다른 작업을 수행하지 못했다.
• 애플리케이션이 커지고 DOM Tree가 커지면 버벅거리거나 응답하지 않는 프레임 드롭을 유발하는 것이 일반적인 문제이다.
• 따라서 성능 문제를 해결할 뿐만 아니라 사용자의 더 나은 경험을 위해 Concurrent Mode가 필요하다.

Concurrent mode의 동작 원리

특정 state가 변경되었을 때 현 UI를 유지하고 해당 변경에 따른 UI 업데이트를 동시에 준비. 준비 중인 UI의 렌더링 단계가 특정 조건에 부합하면 실제 DOM에 반영한다.

• 렌더링 단계
  • Transition 단계
    • state 변경 직후에 일어날 수 있는 UI 렌더링 단계
    • Pending 상태 useTransition 훅을 사용해 state 변경 직후에도 UI를 업데이트 하지 않고 현 UI 상태를 잠시 유지하는 상태이다.
    • Receded 상태 useTransition 훅을 사용하지 않는 기본 상태 전체 페이지에 대한 로딩 화면으로 state 변경 직후 UI가 변경된다 Pending 상태의 시간이 useTransition 옵션으로 지정한 timeoutMs를 넘으면 강제로 Receded 상태로 넘어간다.
  • Loading 단계
    • 스켈레톤 상태 페이지의 일부만을 로딩하는 상태이다.
    • 전체 화면을 모두 로딩으로 대체하는 Receded와는 다르다.
  • Done 단계
    • Complete(완료) 상태로 로딩 UI 없이 모든 정보가 사용자에게 보이는 상태이다.
• 특정 조건
  • 특정 state 변경에 대한 현 화면의 UI 렌더링 단계보다 더 최신 단계로 진행되어야 실제 DOM에 반영된다.
  • 만약 이전에 모든 렌더링 단계가 끝나고 Complete 상태에서 이전과 같은 state의 변경이 일어난다면 Pending이나 Skeleton 상태는 Complete 상태보다 이전의 상태이기 때문에 실제 DOM에 적용되지 않는다.

마치며

이번 기회로 동시성의 개념을 알게되어 좋았다. 나또한 마찬가지로 애플리케이션에 많은 로딩이 걸리면 답답해 하던 경험이 떠올라 이를 Concurrent Mode를 적용해 더 나은 사용자 경험을 제공한다면 퀄리티 높은 애플리케이션을 개발할 수 있을거 같다.

Reference What is React ConcurrentMode? - Medium 사용자 경험 개선 2편_react concurrent mode - Tecoble