React 프로젝트 컴포넌트 구성

카카오스타일이 2021년 7월 기준으로 정리한 React 프로젝트 컴포넌트 구성 가이드다. Next.js 를 쓰지 않는 프로젝트도 Next.js 와 비슷한 구조를 따르게 해 통일성을 확보했고, 라우트·컴포넌트 배치·데이터 가져오기·import 경로 규칙을 각각의 이유와 함께 정한다.

핵심 포인트

시간이 지나면 참여자가 늘고 새 기술(예: React Hook)이 나오면서 구조가 안 맞게 되므로, 구성 가이드를 주기적으로 점검하고 갱신해야 한다는 전제에서 출발한다.
React 는 라이브러리라 제약이 없지만 Next.js 는 프레임워크라 규칙이 있다. 그래서 비 Next.js 프로젝트도 Next.js 와 유사한 구성을 따르게 했다.
`pages` 는 프로젝트 루트가 아니라 `src` 밑에 두고, 비 Next.js 프로젝트에서는 라우트 연결만 수동으로 한다.
페이지를 구성하는 실제 컴포넌트는 `components` 밑에 도메인별로 묶는다. 페이지는 RESTful 경로를 따르지만 컴포넌트는 도메인 기준이라는 점이 다르다.
데이터 가져오기는 `fetchData` 함수로 분리해 컴포넌트 쪽에 두고, 각 컴포넌트는 상위 페이지에서 props 로 받는다.

상세 정리

'가이드' 라는 용어를 쓰는 이유를 밝힌다. 항상 예외가 있고 그에 따른 변형을 허용하기 때문이다.
컴포넌트 진입점은 `index.tsx` 로 통일하기로 내부 논의를 거쳐 결정했다. 파일명을 컴포넌트 이름과 일치시킬지의 대안이 있었다.
네이밍 대응: 페이지 컴포넌트가 `QnaQuestionMainPage` 면 컴포넌트 이름은 `QnaQuestionMain`, `ChatRoomDetailPage` 면 `ChatRoomDetail` 이 되는 식이다.
데이터 시점 차이: Next.js 는 클라이언트로 내보내기 전에 React 와 무관하게 데이터를 가져오고, 비 Next.js 는 클라이언트 로딩이 끝난 뒤 가져온다. 이 차이를 `fetchData` 분리로 흡수한다.
호출 위치: Next.js 는 `getServerSideProps` 안에서, 비 Next.js 는 `useEffect` 안에서 같은 `fetchData` 를 부른다.
이 구조의 장점으로 스토리북에서 컴포넌트에 다른 데이터를 넣어 보기 쉽다는 점을 든다.
단점도 명시한다. 필터·정렬처럼 페이지 이동 없이 데이터가 바뀌어야 하는 경우 상위 페이지로 그것을 전달하는 방법을 따로 고민해야 한다.
export 규칙: `default export` 를 쓴다. 내부에서 컴포넌트 이름을 바꿔도(예: jotai 적용하며 Provider 로 감쌀 때) 사용하는 쪽이 영향받지 않는다.
그 대가로 정의부와 사용부의 이름이 달라져 찾기 어려워질 수 있고, 파일명이 `index.tsx` 인 default export 는 스토리북이 Props 를 제대로 인식하지 못하는 문제가 있다.
import 경로: 가까운 컴포넌트끼리는 상대 경로, `pages` 에서 `components` 처럼 멀리 떨어진 것은 절대 경로를 쓴다. 그래야 파일을 옮겨도 import 를 고치지 않는다.
절대 경로 표기는 `src` 밑 디렉터리 이름을 그대로 쓰기로 정해졌고, 2022년 3월 논의로 다시 바뀌었다는 추가 메모가 달려 있다.