React Quiz - Phases of Rendering, Synthetic Events, Fiber
1. React의 컴포넌트가 화면에 그려지기까지의 렌더링 과정을 단계(phases)별로 설명해주세요.
- 컴포넌트는 화면에 그려지기까지 렌더링을 유발하는 trigger 단계, 컴포넌트를 렌더링하는 render 단계, DOM에 반영하는 commit 단계로 구성됩니다.
- trigger 단계에서 컴포넌트의 첫 렌더링일 때와 컴포너트의 상태가 업데이트했을 때 컴포넌트의 렌더링을 유발합니다.
- render 단계에서 컴포넌트의 첫 렌더링일 때 React는 root 컴포넌트를 호출하고, 리렌더링일 때는 상태가 업데이트된 컴포넌트를 호출합니다.
- 호출한 컴포넌트가 자식 컴포넌트를 갖고 있다면, 더 이상 자식 컴포넌트가 없을 때까지 재귀적으로 자식 컴폰넌트를 호출합니다.
- commit 단계에서 컴포넌트의 첫 렌더링일 때 React는 모든 DOM 노드를 반영하고, 리렌더링일 때는 최근 렌더링 결과와 DOM이 일치하도록 만드는 최소한의 연산을 통해 DOM 노드에 반영합니다.
2. React의 Synthetic Event에 대해 설명해주세요.
- React의 이벤트 객체를 Synthetic event라고 합니다.
- synthetic event는 기본 DOM 이벤트와 동일한 표준을 준수하지만, 일부 React 이벤트는 기본 DOM 이벤트와 직접 매핑되지 않습니다.
2.1 React의 Event와 브라우저의 DOM Event의 차이에 대해 설명해주세요.
- React는 이벤트 핸들러를 root에 등록하고 이벤트 위임을 통해서 이벤트를 처리하는 반면에, 브라우저의 DOM 이벤트는 이벤트를 처리하고 싶은 요소에 이벤트 핸들러를 등록하여 이벤트 처리합니다.
- React 이벤트는 preventDefault 메서드를 직접 호출해야만 기본 브라우저 동작을 막을 수 있는 반면에, 브라우저의 DOM 이벤트는 이벤트 핸들러의 콜백 함수가 false를 반환하여 기본 브라우저 동작을 막을 수도 있습니다.
- React 이벤트명은 camelCase를 사용하는 반면, 브라우저 DOM 이벤트명은 영어소문자로 작성합니다.
3. React의 Fiber와 Fiber의 주요 목표(main goal)에 대해 설명해주세요.
- Fiber는 기존의 동기적인 재조정의 취약점을 보완하기 위해 리엑트에서 개발한 재조정 알고리즘을 말합니다.
3.1 Fiber의 주요 목표에 대해 설명해주세요.
- Fiber의 주요 목표는 렌더링 작업을 작게 나눠서 여러 프레임에 걸쳐 실행할 수 있고, 특정 작업에 우선 순위를 매기고 일시 정지 및 재가동을 할 수 있게 하여 동시성을 지원해주는 것을 말합니다.
참고
