(번역) 명확한 리액트 파일/디렉터리 구조

원문: https://www.joshwcomeau.com/react/file-structure/

리액트는 파일/디렉터리 구조에 관해 정해진 틀이 없는것으로 유명합니다. 당신은 어떻게 파일/디렉터리 구조를 만들고 있나요?

글쎄요. “올바른” 방법은 없지만 저는 리액트를 사용한 7년 이상의 시간 동안 다양한 접근 방식을 시도했고, 만족스러운 솔루션을 찾기 위해 노력했습니다.

이 글에서 저는 블로그와 교육 과정 플랫폼을 포함한 제가 하고 있는 모든 프로젝트에서 사용된 파일/디렉토리 구조에 대해 공유하려고 합니다.

체험 가능한 파일 탐색기

제가 다 설명 드리겠지만, 직접 클릭해 보면서 들어가보면 훨씬 재미있을 것 같습니다.

아래는 직접 체험 가능한 파일 탐색기입니다. 자유롭게 둘러보고 어떻게 구성되어있는지 확인해보세요!

링크에 들어가면 직접 확인해 볼 수 있습니다. 👉 링크

이 데모의 파일은 자바스크립트로 작성되어 있지만, 타입스크립트 프로젝트에서도 잘 동작합니다!

나의 우선순위

먼저, 제가 최적화한 우선순위에 대해 이야기하는 것으로 시작하겠습니다.

첫 번째, 컴포넌트를 쉽게 가져오도록 하고 싶습니다. 저는 이 부분을 아래처럼 작성하길 원합니다.

다음으로, IDE에서 작업할 때 index.js 파일이 넘쳐나는 것을 원하지 않습니다. 제가 작업한 프로젝트의 상단바는 다음과 같았습니다.