Merge pull request #25 from talmood/ymha

[유민] 7장 - 동시성 정리

Author: h1un

[7장] 리액트 동시성/ymha.md

@@ -0,0 +1,52 @@
+### 동기식 렌더
+- 문제점 
+  - 사용자 경험 저하
+  - 우선순위 x
+- 해결 방법
+  - 동시성 렌더링 도입 -> 우선순위 도입
+
+### 자바스크립트 이벤트 루프 관리 
+- 비동기 작업을 관리
+- 수행해야할 작업이 있는지 확인
+- macrotask queue, microtask queue 에서 기본으로 동작
+  - macrotask queue
+    - 이벤트처리, setTimeout 콜백, setInterval 콜백, 입출력 작업 수행 등의 작업 저장
+    - 한 번에 하나씩 처리
+  - microtask queue
+    - 더 작고 즉각적인 작업 
+    - Promise, Object.observe, MutationObserver 에서 발생
+    - MicroTask Queue 작업 대기열에 저장    
+- Macro task 보다 먼저 실행됨
+- MicroTask 가 있는지 확인 하고, 있으면 MicroTask 모두 실행한 후에 MacroTask 실행
+
+### 렌더 레인 
+- 렌더링, 우선순위 관리 효율화
+- 레인
+  - 우선순위 수준을 나타내는 단위
+  - 리액트 18에서 도입
+  - 우선 순위가 높은 레인이 우선 순위가 낮은 레인보다 먼저 처리된다.
+- 레인의 작동방식
+  1. 컴포넌트 업데이트 or 새 컴포넌트 렌더 트리에 추가
+  2. 업데이트의 우선순위에 따라 레인을 할당
+  3. 업데이트 수집
+      - 우선순위에 따라 각 레인에 할당    
+  5. 레인 처리
+      - 우선순위가 높은 레인부터 각 레인에 있는 업데이트를 처리, 같은 레인의 업데이트는 한꺼번에 일괄 처리 
+  6. 커밋 단계
+      - 모든 업데이트 처리 후 변경 사항을 DOM 에 적용, 효과 적용, 기타 마무리 작업 수행
+  7. 반복
+      - 업데이트가 항상 우선순위대로 처리되도록 보장
+
+- 레인에 할당하는 과정
+  1. 업데이트의 콘텍스트 확인
+      - 업데이트가 발생한 콘텍스트 평가 
+  2. 콘텍스트에 따라 우선순위 추정
+  3. 우선순위 재정의가 있는지 확인
+      - useTransition, useDeferredValue 를 사용하여 업데이트 우선순위를 명시적으로 설정한 경우, 추정 순위보다 명시적 우선순위를 사용한다.
+  4. 올바른 레인에 업데이트 할당
+      - 비트마스크를 사용하여 레인에 업데이트 할당 
+
+- 레인 처리
+  - 리액트가 우선순위에 따라 업데이트를 처리 
+- 커밋 단계
+  - 리액트가 변경사항을 DOM 에 적용, 부작용을 실행, 그 외 마무리 작업 수행