전자상거래 프로젝트를 Vanilla JS에서 React로 마이그레이션하면서 DOM 중심에서 상태 중심의 선언적 아키텍처로 전환

Context

바닐라 JS 기반 프로젝트에서 상태가 DOM에 분산되어 있어 장바구니 아이콘, 로그인 상태 등 여러 컴포넌트에서 공유되는 값을 수동으로 동기화해야 했다. 페이지별로 별도의 HTML 파일을 로드하면서 헤더/푸터 변경 시 모든 HTML 파일을 수정해야 하는 문제가 발생했다.

Technical Solution

• HTML 파일 단위 페이지를 React 컴포넌트로 변환: 각 HTML 파일을 독립적인 페이지 컴포넌트로 매핑하고 React Router로 파일 기반 네비게이션 대체
• Layout 컴포넌트로 공유 UI 추상화: Banner, Header, Footer를 레이아웃 래퍼로 구성하고 Outlet을 통해 현재 페이지 렌더링
• 상태 관리를 위한 Context 도입: 장바구니 개수, 로그인 상태 등 다중 컴포넌트에서 필요한 값을 CartContext, AuthContext로 중앙 집중식 관리
• useAuth 훅과 AuthContext 분리: 상태 관리는 useAuth 훅에서, 로그인/로그아웃 액션은 AuthContext에서 소유하여 관심사 분리
• 세션 쿠키 기반 인증 구현: JWT+localStorage 대신 httpOnly 세션 쿠키를 사용하고 fetch 호출에 credentials: 'include' 옵션으로 쿠키 자동 포함

Key Takeaway

React의 핵심은 바닐라 JS의 "DOM을 진실의 원천으로" 취급하는 명령형 패러다임을 "상태를 진실의 원천으로" 취급하는 선언형 패러다임으로 전환하는 것이다. Lifting state up, Custom hooks, Context 등 모든 React 패턴은 "상태가 얼마나 멀리 도달해야 하는가"라는 단일 질문에 대한 다양한 답변이다.