React 폴더 구조, 설계에 대한 고민

우리가 React 폴더 구조를 고민해야하는 이유

우리는 React로 프론트엔드 개발을 하면서 흔히 폴더 구조에 대한 고민을 하게 된다. 하지만, 유명한 개발자들의 폴더 구조를 보면, 저마다 다른 구조를 이루고 있는 것을 보아 React를 이용한 개발에서 우리가 무조건 선택해야하는 길은 없어 보인다.

React 개발팀이 작성한 공식문서에서 조차 우리가 어떻게 파일들을 폴더에 정리해야하는지 추천하는 방식이 없다고 말한다.
<파일 구조에 대한 리액트 공식 문서>
이는 나에게는 '그런건 사실 별로 중요치 않은데?'라고 말하는 것처럼 들린다. 실제로 어떠한 폴더 구조를 취하는지는 React의 성능에 영향을 끼치는 사항은 아니기 때문이다.

그렇다면 우리는 우리의 취향대로 폴더구조를 설계해도 무방할까? 반은 맞고 반은 틀렸다고 생각한다. 개인적인 프로젝트에서는 내 취향이 100%들어간들 내가 이해하고 알기만하면 문제가 없다. '이건 좀 이상한데..?'라는 생각이 들지 않는 선에서 오직 나에게 편한 방식이 가장 효율적인 방식일 것이다.

하지만, 개인이 아닌 팀의 프로젝트에서는 어떨까? 팀 프로젝트로 한 번이라도 협업을 해본 사람들은 공감할 것이다. ⭐이 세상에 나와 같은 개발자는 없다⭐는 것을 상수나 함수명을 정의하는 스타일, 애용하는 로직 등 같은 부분보다 다른 부분이 더 많다. 그렇기 때문에 개인 프로젝트처럼 내 마음대로 폴더구조를 설계해서는 안되는 경우가 많다. 내 폴더 구조가 팀의 성격과 프로젝트의 목적에 따라 효율성과 생산성에 방해되는 형식일 수 있기 때문이다.

협업을 하는 이유 중 하나는 거대한 프로젝트의 목적을 달성하기 위해 효율성과 생산성을 극대화 시키는 것에 있다. 근거 없이 취향만 100%들어간 폴더 구조도 위험하지만, 유명한 폴더 구조를 고민 없이 도입하는 것도 자칫 문제를 초래할 수 있다고 본다.

그렇기 때문에 나는 'React에서 어떠한 폴더 구조가 가장 좋은지'가 아닌, 폴더 구조의 종류와 장단점, 그리고 그것이 어떤 상황에서 사용하면 좋을지에 대해 고민해보는 것에 초점을 맞춰 고민해볼 것이다.

파일 타입에 의한 분류

서론이 길어졌으니 바로 React의 폴더 구조 종류로 넘어가보자. 먼저, 파일 타입에 의한 분류가 있는데, 그 중 가장 유명하다고 할 수 있는 아토믹 디자인이다.

아토믹 디자인은 웹 페이지의 구성요소를 원자단위까지 쪼개어 생각하는 것에서 출발한다. 위 사진에서 보면 알 수 있듯이 버튼이나 인풋, 이미지 등 최소 단위를 엮어 버튼과 글상자 등을 담은 헤더나 네비게이션 바를 구성한다. 이후로는 다시 연관되는 것끼리 더 큰 단위로 묶어나가는 것이 아토믹 디자인이다.

그렇다면 폴더 구조는 어떻게 될까? 아토믹 디자인의 단위로 구성하면 된다.

src
 └ components
   	   ├ pages
       ├ templates
       └ UI 
          ├ atom
          ├ molecules
          └ organism

장점

• 단위별 조합이 자유로워 유지보수가 좋다.
• 규모가 큰 프로젝트에서 구성이 용이하다.

단점

• 5단계의 부모자식 관계인 만큼 불필요한 props drilling이 발생하기 쉽다.
• 규모가 작은 프로젝트에서는 효율적이지 않을 수 있다.

결론

• 규모가 큰 프로젝트이거나 앞으로 확장가능성이 있는 프로젝트인 경우 설계방식으로 채택할 수 있겠다.
• redux등 전역상태관리 툴을 이용하여 단점을 개선하는 것이 필요하다.

파일 기능이나 라우트에 따라

어쩌면 가장 시도해보기 쉬운 방식일 수 있겠다. 파일이 어떤 기능을 담당하는지에 따라 폴더 별로 분류된다. 혹은 특정 라우트에 속하는 기능들끼리만 묶어둘 수도 있을 것이다.

일반적으로 웹 페이지는 '의류 쇼핑몰'과 같이 하나의 큰 주제를 가지고 있고, 하위 주제에 맞게 다른 라우트를 가진 경로로 분화된다.

예를들어, 영화 리스트, 영화평 게시판, 관리자 페이지로 구성된 웹 페이지가 있다고 해보자. 세 가지 기능은 각각'/movie-list', '/movie-comment', '/admin'의 라우트에서 렌더링 된다. 그렇기 때문에 폴더 구조는 아래와 같이 구성될 수 있다.

src
 ├ list 
 │  └ info 
 ├ comment  	 
 │     └ form
 └ admin      

장점

• 해당 라우트의 폴더에서만 작업하면 되기 때문에 직관적이다.
• 불필요한 부모자식관계가 최소화된다.

단점

• 재사용 가능성이 떨어질 수 있다.

리액트 팀이 특정 설계 방식을 콕 집어 추천하지 않는 이유는 실제로는 어느 한 가지 방법을 고집하는 경우가 별로 없기 때문이다. 각 방식의 장점을 취하고 단점을 보완하면서 프로젝트의 스타일에 맞게 확장 및 변경해가는 것이 더 중요한 것이라고 생각한다. 리액트 개팀의 짧은 코멘트를 마지막으로 글을 마친다.

프로젝트가 커지게 되면서, 실제로는 앞서 언급한 방법들을 섞어서 사용하게 됩니다. 그래서 처음부터 “옳은” 방법 하나를 선택하는 것이 대단히 중요하지는 않습니다.

참고 자료

• 파일 구조에 대한 리액트 공식 문서 - React team
• 아토믹 디자인 - Brad Frost
• 리액트 앱에서의 폴더 구조 - Katia Wheeler