fiber 썸네일형 리스트형 React에서 커스텀 렌더러 구현하기 DOM이 아닌 캔버스, WebGL, 터미널, PDF 같은 타깃에 React 컴포넌트를 그대로 쓰고 싶을 때 커스텀 렌더러를 만듭니다. 핵심은 react-reconciler로 Fiber가 생성하는 변경 내역을 우리의 타깃에 적용하는 HostConfig를 구현하는 것입니다. 실무에서 바로 쓸 수 있는 최소 Canvas 렌더러 예제를 통해 개념부터 코드까지 빠르게 정리합니다.1. 커스텀 렌더러가 필요한 순간다음과 같은 경우에 적합합니다. DOM 대신 2D 캔버스나 WebGL에 UI를 그려야 할 때, 게임 UI, 데이터 시각화 캔버스, CLI/TTY, PDF/이미지 출력, 네이티브 브릿지에 React 상태/동기화를 재사용하고자 할 때입니다.2. 핵심 개념 훑기Reconciler는 React 엘리먼트 트리의 변경.. 더보기 React Fiber 아키텍처 이해하기 React Fiber는 React 16부터 도입된 재작성된 렌더링 엔진으로, UI 업데이트를 효율적으로 처리하는 데 중점을 둔 아키텍처입니다. 기존 React의 렌더링 방식에 비해 더 유연하고 성능 최적화가 가능합니다.1. Fiber 아키텍처란?Fiber는 React가 내부적으로 UI 업데이트 작업을 수행하는 단위 단위로, 이를 통해 작업을 쪼개서 처리하며, 고도로 제어 가능한 렌더링을 가능케 합니다. 각 Fiber는 컴포넌트 트리의 한 노드를 나타냅니다.2. Fiber 도입 전과 후의 차이기존 React 업데이트는 블로킹 방식으로, 한 번에 전체를 렌더링하여 사용자 인터랙션 중 버벅임이 발생할 수 있었습니다. Fiber는 작업을 일정 단위로 나누어 우선순위를 지정하고, 필요 시 중단 후 재개함으로써 부.. 더보기 이전 1 다음