프론트엔드
Front-end 개발자가 회고하는 기획전 개편
두줄요약
Next.js 기획전 개편에서 HTML 모듈 사이에 기존 상품 카드를 삽입하는 방법을 다뤘습니다. createRoot와 provider 중복 사용의 성능 영향을 측정해 설계 타당성을 검증했습니다.
구조와 흐름
- JSP 기반 기획전 시스템을 Next.js로 개편하며, BO에서 생성한 HTML 모듈과 기존 상품 카드 컴포넌트를 함께 렌더링하는 구조 검토
dangerouslySetInnerHTML로 HTML을 주입한 뒤createRoot로 특정 영역에 기존 컴포넌트를 삽입하는 방식 채택- 여러 root 생성에 따른 상태 공유 문제를
RecoilRoot,QueryClientProvider재감싸기로 해결
성능/운영 포인트
- 여러 Virtual DOM 생성 자체는 업데이트 비교 횟수 증가로 이어지지 않는다고 분석
- provider 중복으로 인한 메모리 증가는 있었지만, 작은 크기의 상태 저장 수준이라 영향이 크지 않다고 판단
createRoot는 초기 렌더링 직후 삽입 비용이 커질 수 있어, 컴포넌트 수 증가에 따른 지연 가능성을 Profiler와 Performance API로 확인