[React] 정답이 없는 리액트 프로젝트 구조

💡 React 프로젝트 구조는 저마다 다른데, 나는 정답을 알고 싶다!! 그런데, 정답은 없다?!?!

목표

• 리액트 프로젝트는 정해진 파일 구조가 없는 이유를 설명할 수 있다.
• 대중적인 리액트 파일 구조를 도식할 수 있다.
• 파일 구조별로 각각의 관심사(역할)을 설명할 수 있다.

 

CRA를 통해 리액트 프로젝트를 구성하거나, 직접 프로젝트를 구성할 때,

프로젝트의 파일 구조를 어떻게 잡을지 미리 정의하는 것은 모든 프로젝트에서 중요한 부분이다.

하지만, 리액트의 경우 '이것이 정답이다'라고 말하는 파일 구조를 찾기란 어렵다.

 

React 프로젝트의 파일 구조는 정답이 없는걸까? 왜?

가장 큰 이유는 React가 무엇인지 되짚어볼 필요가 있다.

React 공식 페이지의 정의를 인용하자면,

`React란, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리`라고 묘사된다.

 

그렇다. 리액트는 프레임워크라고 정의하지 않는다. 

 

프레임워크란 프로젝트의 틀을 미리 정의하고 가이드라인에 따라 개발하도록 만들어진 것이다.

이와 반대로, 리액트는 `사용자 인터페이스를 컴포넌트 단위로 구조적으로 잘 만들게 도와줄게~` 하고 던지고, `파일 구조는 알아서해~` 하는 것이다. 그렇기 때문에 기가막힌 구조를 찾을 순 있어도 그것이 정답이라고 할 순 없다.

 

그럼에도 많이 사용되고, 일반화된 폴더 구조가 존재한다.

이를 정리해보고, 필요에 따라 적절한 폴더 구조를 만들어보자.

 

Popular React Project Structure

파일의 기능이나 라우트에 의한 분류

기능이나 라우트로 분류된 폴더에 CSS, JS,  테스트 코드를 함께 두는 구조이다.  아래 예시를 참고해보자.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

“기능”의 정의는 개발자에 따라 다르게 정의되며, 세분화에 따라 파일 구조는 다양해질 수 있다.

최상위 폴더 리스트를 정의하기 어렵다면,

서비스 사용자들에게 서비스를 구성하는 중요한 부분이 무엇인지 정의해볼 필요가 있고,

사용자들의 니즈를 토대로 만들어진 구조를 사용할 수도 있다.

 

파일 유형에 의한 분류

파일 유형별 분류란, 비슷한 파일끼리 묶어주는 방법이다. 아래 예시를 참고해보자.

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

특정 개발자들은 애플리케이션 내 역할/관심사에 따라 컴포넌트를 다른 폴더로 분리하는 것을 선호한다.

예를 들어, 아토믹 디자인은 이와 같은 원칙에 기반한 디자인 방법론이다.

 

 

이는 지켜야 할 엄격한 규칙이라기보다 도움이 되는 예시로 활용해야 함을 잊지 말아야 한다.

리액트 공식 페이지에 다음과 같은 글이 존재한다.

너무 깊게 생각하지 마라!!
이제 막 시작하는 단계라면 파일 구조를 선택하는 것에 있어서 5분 이상 시간을 투자하지 마라.
앞서 살펴본 접근법 중에 아무거나 선택하고(혹은 자신만의 방법) 우선 코드를 작성봐라!

 

출처

• 파일 구조 – React (reactjs.org), Facebook Open Source, v18.0.0
• 리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?, _seeul, 2021-08-30
• Structuring our Styled Components | Part I | by Alan B Smith | Medium
• Structuring our Styled Components | Part II | by Alan B Smith | Medium

 

Last Updated. 2022. 09. 03.