Skip to content

Latest commit

 

History

History
124 lines (74 loc) · 5.85 KB

2주차_동시성&병렬성.md

File metadata and controls

124 lines (74 loc) · 5.85 KB

React에서의 동시성과 병렬성은 어떻게 해석되고 구현되는가? (류지예, 조명근)

동시성(Concurrency), 병렬성(Parallelism)

  • 동시성 : 작업들을 번갈아가며 수많은 작업들을 처리해가는 것, '마치' 동시에 처리되는 것처럼 보이게 하는 것
  • 병렬성 : 여러 작업을 동시에 수행하는 것

등장 배경

초기 컴퓨터의 운영 과정이 복잡한 문제로 설정 시간이 많이 소모되는 걸 해결하기 위해 여러 사람이 동시에 컴퓨터를 사용할 수 있도록 운영체제를 개발함.

하나의 CPU 처리장치 자원을 어떻게 공유 할 수 있을지 고민하게 됨.

프로그램을 더 작은 단위로 쪼개서 CPU가 해당 작업을 번갈아가며 실행할 수 있도록 함

CPU에서 복수의 코어 개념이 등장하면서 동시성을 사용한 멀티태스킹 에서 멀티 코어를 사용한 멀티태스킹 방식으로 변경


React에서는?

React는 렌더링 작업을 중단/재개 가능하게하기 위해 동시성 개념을, 데이터 로딩을 효율적으로 처리하기 위해 병렬성 개념을 도입했다.


Frontend와 동시성

Javascript는 단일 스레드 언어, "병렬성"에 대한 개념보다 "동시성"에 대한 개념이 적용되어 있다.

동시성 핸들링에 유리하게 설계된 Javascript는 브라우저에서 Event Loop라는 "매커니즘"을 통해 비동기 작업을 관리한다.


React에서 동시성 구현

중단 가능한 렌더링을 구현하기 위해 Fiber 아키텍처을 도입했다.

Fiber 아키텍쳐의 핵심은 작업을 작은 단위로 쪼개고 우선순위를 부여하는 것이다.

많은 동작 코드중에 workLoopConcurrent는 React의 렌더링 작업이 실제로 어떻게 나뉘고 처리되는지 보여준다.

function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

  • 작업을 작은 단위(workInProgress)로 분할

  • 각 작업 후 양보(shouldYield) 여부 확인

  • 필요시 현재 작업을 중단하고 나중에 재개 가능


우선순위 체계

어떤 작업이 더 급한지 판단할 수 있도록 Lane이라는 우선순위 체계를 도입했다.

  • SyncLane: 즉시 처리해야 하는 작업 (예: 클릭 이벤트)

  • InputContinuousLane: 사용자 입력 관련 작업

  • DefaultLane: 일반적인 우선순위의 업데이트


React에서 동시성을 관리하는 방법

동시성의 기본 개념은 "UI렌더링은 사용자의 행동을 Block하면 안된다." 였다.

이는 렌더링으로 사용자의 행동이 block되면 사용성에 큰 영향을 끼치기 때문이였다.

React18에서 Automatic Batching을 도입하면서 불필요한 렌더링을 줄일 수 있었다.

그럼 React에서 동시성의 우선순위는 어떻게 정해질까?

먼저 우선순위 종류는 아래와 같다.

  • Immediate Priority (ImmediatePriority): 사용자 입력과 같이 즉각적인 반응이 필요한 작업에 사용.
  • User Blocking Priority (UserBlockingPriority): 사용자 상호작용 후 즉시 처리해야 하는 작업.
  • Normal Priority (NormalPriority): 일반적인 렌더링 업데이트 작업.
  • Low Priority (LowPriority): 비긴급적인 작업 (예: 백그라운드 업데이트).
  • Idle Priority (IdlePriority): 거의 모든 작업이 완료된 후 처리할 수 있는 작업.

React18 부터는 transition의 개념을 활용해 개발자가 주도해서 동시성을 컨트롤 할 수 있다.

  • startTransition : UI Block을 일으키지 않고 상태를 변경
  • useTransition : transition이 진행중인지 알려주는 isPending 상태값을 제공
  • useDeferredValue : transition이 일어나는 상태값을 레핑합니다. startTransition과 같은 역할을 합니다.

React 19에서의 발전

  1. 비동기 Transition을 활용해 비동기 함수를 직접 지원하여 동시성 처리를 개선했다.

    • 비동기 작업과 상태 업데이트를 하나의 중단 가능한 단위로 처리
    • 새로운 입력이 들어오면 이전 작업을 자동으로 취소
    • 사용자 입력이 차단되지 않아 더 나은 UI 응답성을 가진다.

  2. 새로운 use Hook은 Promise 기반의 데이터 로딩을 더 효율적으로 만든다.(병렬적으로)

    • Promise가 어디서 시작되는지 명확히 볼 수 있어 명시적으로 데이터 로딩 가능
    • 중첩된 Suspense 없이도 병렬 로딩 가능한 단순한 구조를 가짐
    • 조건문이나 루프 안에서도 사용 가능

  3. React의 병렬성 접근을 위해 Suspense 도입 (사실상 React 18에서 도입됨)

    • Suspense는 데이터가 준비될 때까지 컴포넌트 렌더링을 "일시 중단"할 수 있게 해주는 기능을 의미한다

참고 자료