리액트 공부하기 - 파일구조

프로젝트를 했을 때 컴포넌트나 페이지의 파일을 어떻게 나뉘어야 하지 ?에 대한 고민이 있었고

앞으로 더 다양한 프로젝트를 할 때 관리해야 할 파일이 늘어남에 따라, 효율적으로 직관적으로 파일을 분류해야 할 필요가 생기겠지..

---

어떻게 파일을 나누면 좋을까? 에 대한 정답은 없지만, 우선 리액트 공식 문서에서 권장하는 방식은 아래와 같다.

 

파일 구조 – React

---

참고하면 좋을 블로그

 

[React] 리액트의 폴더 구조

---

 

🗂️ 리액트에서 자주 쓰는 주요 폴더 4개

 

폴더명	하는 역할
app/	Redux 스토어 같은 앱 전체 설정
features/	기능별 Redux 상태 slice들 (예: movie, user 등)
components/	버튼, 카드, 헤더 같은 작고 재사용 가능한 UI 컴포넌트
pages/	라우팅 대상인 화면 단위 컴포넌트 (ex. Home, About, MovieDetail 등)

 

 👩🏻‍💻 비유

 

역할	실제 예시	비유
components/	<MovieCard />, <Button />	작은 레고 블록들
pages/	<HomePage />, <MovieDetailPage />	각각의 방 (전체 페이지)
features/	movieSlice.js, userSlice.js	상태를 관리하는 뇌
app/	store.js, rootReducer.js	전기선 연결과 배선 작업

 

 

---

✎ React 프로젝트 구성 방식

예시 :

src/
├── pages/           ← "페이지" 역할을 하는 컴포넌트들 (라우팅 대상)
│   ├── Home.tsx
│   ├── About.tsx
│   └── ...
├── components/      ← 재사용 가능한 컴포넌트들 (버튼, 카드, 모달 등)
│   ├── Button.tsx
│   ├── Navbar.tsx
│   └── ...
├── App.tsx          ← 루트 컴포넌트
└── index.tsx        ← 진짜 진짜 시작점

구조를 만드는 흐름

1. pages 폴더: 실제로 URL로 접근 가능한 페이지 컴포넌트들
   • 예: /home, /about, /profile
2. components 폴더: 여러 페이지에서 재사용할 수 있는 UI 조각들
   • 예: 버튼, 카드, 리스트, 모달 등
3. pages > components를 배치해서 화면을 구성
   • 예를 들어 Home.tsx 안에 <Header />, <PostList />, <Footer /> 같은 식으로 채움

[Main Page]
  ├── Navbar
  │     ├── Logo (-> Main Page 이동)
  │     ├── Search Input (-> 검색 결과 모달 띄움)
  │     ├── Login Button (-> Login Page 이동)
  │     └── Signup Button (-> Signup Page 이동)
  └── Popular Movies Section (랜더링)

[Search Modal] (메인 위에 오버레이로 뜸 → CSS로 처리 가능)

[Movie Detail Page]
  └── 선택한 영화 상세 정보

[Login Page]
  └── 로그인 Form → 나중에 Supabase 연동

[Signup Page]
  └── 회원가입 Form → 나중에 Supabase 연동

 

 

---

출처 : 리액트 공식문서, 챗지피티, 블로그

 

[React] 리액트의 폴더 구조