React 프로젝트, 컴포넌트 구성 가이드로 일관성을 잡다!
by DD
4년 전
조회수 4
React 프로젝트의 일관성 유지를 위해 컴포넌트 구성 가이드라인을 제시함
Next.js의 라우팅 및 컴포넌트 구조를 차용하여 프로젝트 전반의 통일성을 확보함
데이터 Fetching 방식 통일 및 절대 경로 사용을 통해 유지보수성을 향상시킴
Next.js 라우팅 구조 차용
Next.js의 pages 디렉토리 기반 라우팅 방식을 채택하여 프로젝트 구조를 통일한다. 구체적으로, Next.js를 사용하지 않는 프로젝트에서도 pages 디렉토리를 활용하고, 수동 라우팅 설정을 통해 일관성을 유지한다. 따라서 코드 가독성과 유지보수성을 동시에 확보한다.
컴포넌트 디렉토리 구조 설계
페이지 컴포넌트와 UI 컴포넌트를 분리하여 관심사 분리(Separation of Concerns)를 실현한다. components 디렉토리를 활용하여 페이지에 대응하는 컴포넌트를 관리하고, 도메인별로 묶어 컴포넌트 재사용성을 높인다. 반면, 파일명과 컴포넌트 이름 일치 여부에 대한 논의를 거쳐 index.tsx를 진입점으로 통일했다.
데이터 Fetching 방식 통일
Next.js와 비 Next.js 프로젝트 간의 데이터 Fetching 방식 차이를 해결하기 위해 fetchData 함수를 도입한다. getServerSideProps 또는 useEffect 내에서 fetchData를 호출하여 데이터 로딩 시점을 통일한다. 결과적으로, 컴포넌트 재사용성을 높이고, 스토리북 구성의 편의성을 제공한다.
