React는 효율성과 유연성을 보장하는 선언적 접근 방식을 제공함으로써 개발자가 웹 애플리케이션을 만드는 방식에 혁신을 가져왔습니다. React 18의 출시와 함께 React 팀은 렌더링 프로세스를 더욱 개선하는 동시성을 비롯한 몇 가지 고급 기능을 도입했습니다. 이 글에서는 React의 렌더링 마법 뒤에 숨겨진 복잡한 메커니즘을 살펴봅니다.
React 업데이트의 과정
그림을 그리는데 붓을 한 번 움직일 때마다 캔버스 전체를 다시 그려야 한다고 상상해 보세요. 이는 업데이트를 효율적으로 관리할 수 있는 방법이 없다면 웹 애플리케이션이 느려질 수 있는 것과 비슷합니다. React의 렌더링 프로세스는 전체 그림을 다시 그리지 않고도 수정할 부분을 정확히 알고 있는 아티스트와 같습니다. 이 프로세스를 세분화해 보겠습니다
1. 상태 업데이트 트리거하기
모든 것은 변화에서 시작됩니다. React에서 이는 보통 상태 또는 프로퍼티의 변경을 의미합니다. 버튼 클릭과 같은 사용자 액션이든 API 호출의 새로운 데이터이든, 이러한 변화는 UI를 업데이트할 때가 되었다는 신호를 React에 보냅니다.
2. 레인에 업데이트 할당하기
React 18은 우선순위에 따라 업데이트를 분류하기 위해 '레인(Lanes)'이라는 개념을 도입했습니다. 여러 차선이 있는 고속도로를 생각해보면, 어떤 차선은 빠르게 움직이는 차량(긴급 업데이트)을 위한 것이고 다른 차선은 여유롭게 운전하는 차량(비긴급 업데이트)을 위한 것입니다. 서로 다른 차선에 업데이트를 할당함으로써 React는 어떤 업데이트를 먼저 처리할지 관리하여 중요한 업데이트가 교통 체증에 막히지 않도록 할 수 있습니다.
3. 스케줄러로 스케줄링하기
React의 스케줄러는 트래픽 컨트롤러와 같습니다. 우선순위에 따라 각 업데이트가 언제 "시작"되어야 하는지 결정합니다. 사용자 상호작용에 의해 트리거되는 업데이트와 같이 우선순위가 높은 업데이트는 즉시 진행하도록 승인되어 막히지 않는 반응을 보장합니다. 반면 우선순위가 낮은 업데이트는 더 중요한 업데이트가 통과할 수 있도록 지연되어 전반적인 성능을 최적화할 수 있습니다.
4. 재조정 프로세스
React 렌더링 엔진의 핵심은 재조정 프로세스입니다. 이 과정에서 React는 마지막 렌더링 이후 변경된 사항을 결정합니다. 두 개의 목록을 비교하여 차이점을 찾는 것과 비슷하지만, React는 가상 DOM 트리를 비교합니다. 각 업데이트에 대해 새 트리를 생성하고 이를 현재 트리와 비교함으로써 React는 업데이트, 추가 또는 제거해야 하는 컴포넌트를 정확히 찾아냅니다.
5. Fiber 생성 및 업데이트
React의 각 컴포넌트는 유형, 상태, 프로퍼티와 같은 컴포넌트에 대한 정보를 보유하는 작업 단위인 Fiber 노드에 해당합니다. 조정하는 동안 React는 새로운 상태 또는 프로퍼티 변경 사항으로 이러한 파이버를 업데이트합니다. 이 단계는 UI를 업데이트하기 위해 수행해야 하는 작업을 정리하는 데 매우 중요합니다.
6. 작업으로 Fiber에 태그 지정하기
React는 조정하는 동안 파이버 트리를 살펴볼 때 새 노드에 대한 작업 배치, 변경 사항에 대한 업데이트, 제거에 대한 삭제 등 특정 유형의 작업으로 파이버에 태그를 지정합니다. 이 태깅은 React가 다음 단계에서 수행해야 할 작업을 추적하는 데 도움이 됩니다.
7. 청크에서 작업 수행하기
청크 단위로 작업을 수행하는 React 18의 기능은 필요에 따라 작업을 중단했다가 다시 시작할 수 있는 획기적인 기능입니다. 이는 React에서 동시 기능을 가능하게 하는 기능의 일부입니다. 복잡한 장면을 그린다고 상상해 보세요. 한 번에 끝내는 것이 아니라 부분을 스케치하고, 한 걸음 물러나서 다음에 주의가 필요한 부분을 확인하고, 그에 따라 우선순위를 정합니다. React도 비슷한 방식으로 업데이트 프로세스를 관리하기 쉬운 덩어리로 나누고 우선순위가 높은 작업에 먼저 집중합니다. 이렇게 하면 백그라운드에서 업데이트를 처리하는 동안에도 애플리케이션의 응답성을 유지할 수 있습니다.
8. 커밋 단계
조정이 끝나고 업데이트가 정리되면 React는 커밋 단계로 들어갑니다. 이 단계는 React가 브라우저의 DOM에 변경 사항을 적용하는 단계입니다. 이 단계는 신중하게 조율된 프로세스로, 업데이트가 올바른 순서로 효율적으로 적용되도록 보장합니다.
변경 사항 적용:
React는 작업으로 태그된 파이버를 살펴보고 이러한 변경 사항을 반영하도록 DOM을 업데이트합니다. 여기에는 새로운 요소를 추가하거나, 기존 요소를 업데이트하거나, 더 이상 필요하지 않은 요소를 제거하는 것이 포함될 수 있습니다.
라이프사이클 훅과 이펙트:
React는 또한 현재 실행해야 하는 모든 라이프사이클 메서드(클래스 컴포넌트의 경우) 또는 이펙트(함수 컴포넌트의 경우)를 호출합니다. 예를 들어 컴포넌트가 DOM에 추가된 후에 componentDidMount나 useEffect 훅이 호출될 수 있습니다.
커밋 단계는 동기식이기 때문에 일단 시작되면 중단 없이 완료될 때까지 실행됩니다. 이렇게 하면 UI가 일관된 상태로 업데이트되어 UI에 결함을 일으킬 수 있는 부분 렌더링을 방지할 수 있습니다.
9. 마무리 및 정리
커밋 단계가 끝난 후에도 React의 작업은 아직 끝나지 않았습니다. 정리하고 다음 업데이트 주기를 준비해야 합니다.
마운트 해제:
업데이트 주기 동안 제거된 컴포넌트가 마운트 해제되고 관련된 모든 cleanup effect가 실행됩니다.
상태 재설정:
다른 레인의 업데이트 목록 등 업데이트와 관련된 내부 상태가 재설정되어 다음 업데이트 주기를 위해 React가 준비됩니다.
마무리
업데이트를 트리거하는 것부터 DOM에 변경 사항을 커밋하는 것까지의 전체 프로세스는 업데이트를 효율적으로 관리하여 원활한 사용자 경험을 제공한다는 React의 디자인 철학을 잘 보여줍니다. React 18에 도입된 React의 동시 기능은 애플리케이션이 성능 저하 없이 여러 업데이트를 동시에 처리할 수 있도록 함으로써 이를 더욱 향상시킵니다.
참고
https://medium.com/canadivs-technology-and-design/react-18-new-features-c7715467ba2
