[React] 리액트 폴더구조

 

이번에 새로운 프로젝트를 하다 문득 지금까지 리액트의 장점을 못살리고 이용한 것이 아닌가? 라는 생각이 들었다

더욱더 컴포넌트화 하며 분리하여 코드를 나누고 폴더구조를 잘짜야겠다고 생각하면서 리액트 폴더구조에 대해 알아봐야겠다고 생각했다

 

리액트를 이용한 프로젝트를 처음 시작한 시점에도 올바른 폴더구조가 무엇이고 파일을 어떻게 묶어야되는지, 어디까지 나누어야되는지 확신이 들지 않아서 여러번 찾아본 경험이 있다

 

그때의 결론은 답은 없다..?였다

리액트 공식문서에서도 폴더구조에 대해 너무 큰 고민을 하지말라고 말하기도 하고 궁금해서 사람들마다 방식이 다 달라서 어려웠다

정답이 없다는게 제일 어려운거 같다.

 

일단 기본 리액트 폴더들부터 알아보자면 아래와 같다

app
├── node_modules
├── public
├── src
├── package.json	
└── package-lock.json

 

node_modules

현재 프로젝트에 포함된 라이브러리들이 설치되어 있다(깃허브에 올리면 안됨)

 

public

앱이 컴파일될 때 사용하지 않는 모든 것을 담는다 (절대경로를 사용한다)

파비콘과 같이 index.html내부에서 직접 사용하는 것들이 위치

 

src

리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 컴파일됨

 

package.json

프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록, 외부 패키지 의존성을 관리

누군가가 내 프로젝트를 받아 실행할 때 node_modules 대신 여기 기준으로 npm이 설치하게됨

 

package-lock.json

사용하는 패키지들의 정확한 버전 정보를 위함

package.json은 semver 으로 패키지 정보를 표기하는데 (이는 쉽게 1이상 2이하의 버전이란 의미(대략))

 

 

 

 

└─ src
 ├─ components
 ├─ assets 
 ├─ hooks
 ├─ pages
 ├─ constants
 ├─ services (= api)
 ├─ utils
 ├─ store
 └─ App.tsx

 

components

재사용 가능한 컴포넌트

 

assets

이미지 혹은 폰트와 같은 파일들이 위치

 

hooks

커스텀훅이 위치

 

pages

라우팅을 적용하여 페이지 컴포넌트를 분리하여 위치

 

constants

공통적으로 사용하는 상수들을 정의한 파일이 위치

 

services(api)

api관련 로직의 모듈 파일이나 auth와 같이 인증과 관련된 파일이 위치

 

utils

정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일들이 위치

 

store

상태관리에 관련한 파일들이 위치

 

 

 

 

 

보통 리액트의 폴더 구조를 설계하는 방법은 아래와 같다

1. 파일의 기능이나 라우팅에 의한 분류
2. 비슷한 파일끼리 묶는 파일 유형에 의한 분류

 

음,, 뭐랄까

 

 

다시 폴더구조를 보면서 느낀건데 역시 리액트에서 폴더구조에 정답은 없는 것같다.

다만, 지금까지 느낀건 나의 기준에서

• 너무 많이 중첩되게 뎁스를 만들지 말자
• 같은 기능이나 연관된 영역이라면 가깝게 묶자정도이고

지금도 정답은 못내린 것같다 솔직히, 하지만 계속 이것을 신경쓰며 설계하고 나의 명확한 기준, 프로젝트의 명확한 프로젝트에 대해 계속 고민하며 정답의 기준을 내리진 못해도 나만의 정답은 완성해야겠다