Front-end 개발자가 회고하는 기획전 개편

올리브영 스토어전시 스쿼드는 2024년 2~3분기에 기존 JSP로 구현된 기획전 시스템을 Next.js로 전환하는 프로젝트를 진행했다. 핵심 과제는 백오피스(BO) 에디터에서 생성된 사용자 정의 HTML 모듈 내부에 기존의 React 컴포넌트를 어떻게 삽입할 것인가였다.

이를 해결하기 위해 dangerouslySetInnerHTML로 HTML을 먼저 DOM에 주입한 뒤, createRoot API를 사용하여 특정 요소에 React 컴포넌트를 다시 렌더링하는 방식을 채택했다. 이 과정에서 발생하는 Recoil 및 React-query와 같은 전역 상태 관리 라이브러리의 컨텍스트 유실 문제는 각 createRoot 호출 시점에 Wrapper 컴포넌트로 감싸는 방식으로 해결했다.

여러 개의 Virtual DOM 생성에 따른 성능 저하 우려에 대해서는 React.Profiler를 통해 검증을 진행했다. 테스트 결과, createRoot로 생성된 컴포넌트의 변경 사항이 기존 컴포넌트의 렌더링에 영향을 주지 않음을 확인하며 성능 이슈가 없음을 입증했다.