React 프로젝트의 폴더구조는 어떻게 설계하는것이 좋을까?
🔥 목차 🔥
1. 리액트 폴더 구성에 대해
2. 폴더 구성 시 알아두면 좋은 것들 - presentational / container component / Atomic Design
3. 리액트가 추천하는 프로젝트 구조 설계 방법 - 파일 유형 / 기능 및 라우터 별로 분리하는 법
4. 참고 자료 및 더 읽어보면 좋을 것들
1. 리액트 폴더 구성에 대해
리액트 아키텍쳐의 특성
- 리액트는 Javascript 라이브러리로서, UI 컴포넌트를 설계할 수 있는 UI 라이브러리이다. Vue와 같은 다른 프레임워크와 다르게 복잡한 구성에 있어 패턴에 제약이 없는 게 특징이다. 하지만 최소한의 변경으로 재사용되고, 반복적인 코드를 통해 가독성을 높이기 위해서는 효율적인 구성으로 이루어진 보일러 플레이트가 필요하다.
- 이를 위해 다양한 디자인 패턴이 만들어졌으며, 대표적인 패턴으로는 flux 패턴이 있다. 또한 Higher order component, Context, Render props, Refs 등의 개념으로 더 효율적인 코드 구성이 가능하다.
리액트는 어떻게 프로젝트를 구성하는가?
- 완벽한 프로젝트의 구조는 존재하지 않지만, 프로젝트 구성에 대한 기본적인 원리를 알면 추후에 본인의 프로젝트에 있어서 보다 편리한 폴더 구축이 가능할 것이다. 또한 프로젝트 양이 방대해지고 관리해야할 파일이 늘어날 수록, 기본 폴더 구조를 통해 기준을 잡는 것이 중요할 것이다.
- create-react-app을 통해 react가 제공하는 기본 폴더 구조를 확인할 수 있다. 크게 아래와 같은 폴더로 이루어져 있다.
- Assets Folder : 스타일링에 필요한 에셋을 담는다. 페이지 기반의, 혹은 컴포넌트 기반의 스타일을 추구한다면 페이지, 컴포넌트의 에셋을 따로 두는 것 아니라 이렇게 한번에 묶는 것을 추천한다.
- Layouts Folder : header나 footer, sidebar 등의 레이아웃을 관리할 수 있다.
- Components Folder : 버튼이나 모달 등의 필요한 ui 컴포넌트 블록을 관리한다. 각각의 컴포넌트는 해당 컴포넌트를 실행할 수 있는 독립적인 테스트 파일로 구성된다.
- Pages Folder : 라우팅되는 각각의 페이지를 담고 있다. 각 페이지는 상태 혹은 동기 화 및 호출에 필요한 내용을 담고 있으며, 다양한 컴포넌트 단위로 이루어진다. 페이지에 사용되는 컴포넌트는 componenents folder가 아닌 이 폴더에서 관리한다.
- Hooks Folder : 커스텀된 훅을 관리하는 폴더로, 유용하게 여러 커스텀 훅을 하나로 관리해 여러 프로젝트에 적용할 수 있다.
- 그 외에도 redux와 같은 커스텀 미들웨어에 대한 내용을 담는 Middleware Folder, 다양한 종류의 라우팅에 관한 Routes Folder, config.js파일에서 사용하는 환경변수에 대한 내용을 담은 Config Folder, 정규표현식이나 데이터 가공 등에 자주 사용되는 함수나 객체에 대한 내용을 담은 Utils Folder 등과 함께 폴더는 이루어진다.
- 또한 CRA 초기 세팅 후 생기는 node_modules는 패키지 소스 코드를 포함하고, package.json을 통해서 추후에 세팅된 라이브러리나 패키지 관련 정보를 확인할 수 있다.
2. 폴더 구성 시 알아두면 좋은 것들
Presentational 컴포넌트 VS Container 컴포넌트
- 컴포넌트가 dom요소에 관여하는지, 데이터 핸들링에 관여하는지에 대한 기능별로 컴포넌트를 나눌 수 있다. 해당 컴포넌트 구분법에 대한 각각의 특징은 아래와 같다.
Presentational 컴포넌트
- 뷰를 담당하는 컴포넌트로, 주로 DOM 요소로 스타일과 함께 존재한다. redux나 상태에 관한 로직이 거의 없으나, UI와 관련이 있는 상태가 관여되는 경우도 있다. 직접적으로 데이터를 변경하지 않으며 데이터에 props로 접근하는 특징을 가진다.
Container 컴포넌트
- 데이터를 다룰 때 주로 쓰이며, 내부에 직접적인 DOM 요소가 관여하지 않고 스타일이 적용되지 않는다. 또한 상태나 상태를 관리하는 redux와 함께 사용되기 때문에 Presentational 컴포넌트에 상태 또는 함수를 전달할 수 있다. 또한 다른 presentational 컴포넌트와 container 컴포넌트를 관리하는 데에 쓰인다.
Atomic Design
- 아토믹 디자인은 디자인 시스템을 만드는 방법 중 하나로, 5단계 단계(Atoms - Molecules - Organisms - Templates - Pages)로 나뉜다.
- Atom, 즉 원자는 한가지 블록단위를 만드는 기본 단위이다. html태그나, form과 label 혹은 input과 button이 이에 해당한다. 또한 폰트나 컬러 팔래트와 같은 추상적인 인터페이스도 이에 해당한다고 할 수 있다. 이는 매우 추상적이고 개별적으로 존재하기 때문에, 이를 잘 묶어 보관한다면 관리가 용이할 것이다.
- Molecules, 즉 분자는 원자(Atoms)들을 묶은 묶은 것으로, 디자인 시스템에서 뼈대의 역할을 한다고 할 수 있다. 가령 input과 제출form이 있다고 하자. 각각이 개별적으로 존재했다면 유용하지 않았겠지만, 이를 묶는다면 '입력해서 제출하는' 하나의 복합 기능을 만들 수 있다.
- Organism, 즉 유기체는 분자들이 엮어서 하나 이상의 일을 해낼 때, 분자들을 결합한 하나의 블록이라고 할 수 있다. 복잡하면서 개별적인 인터페이스의 부분들을 묶어 하나로 관리하는 그룹을 말한다. 가령 입력 폼을 묶어 검색하는 기능을 하는 입력 폼으로, 혹은 메뉴바 분자를 엮어 nav의 구조를 가진 유기체로 만드는 것이 이에 해당된다.
- 분자 단위를 엮을 때 비슷하거나, 다른 유형의 분자를 엮어 유기체를 만들 수도 있다. 유기체로 인터페이스 단위를 엮으면 엮을 수록 안정적이며, 재사용이 가능한 컴포넌트로 관리할 수 있다는 장점이 있다.
- Templates부터는 무언가를 조직적으로 엮어나간다는 개념에서 벗어나, 더 클라이언트와 결과물에 직접적이게 다가가는 방법에 대해 고민하게 된다. 하나의 페이지를 만들기 위해 템플릿은 여러 유기체들을 페이지 위에 부착하게 된다. 이는 클라이언트에게 페이지의 구체적인 맥락을 제공하는 데에 매우 중요한 요소라고 할 수 있다.
- 또한 클라이언트가 직접 경험하는 첫번째 디자인 결과물이라고 할 수 있다. 이에 대한 예시는 HTML 와이어프레임을 말할 수 있다.
Pages
- Pages, 페이지는 템플릿의 구체적인 예시라고 할 수 있다. 직접 클라이언트에게 제공하는 컨텐츠와 묘사를 담고 있다. 사람들이 가장 많은 시간을 보내는 부분이기 때문에 우리의 디자인 시스템에 대한 개선점을 발견하는 데 있어 가장 중요한 단계라고 할 수 있다. 따라서 이에 대한 최선의 결과물을 만들어 내기 위해서는, 앞서 살펴본 단계를 하나하나 톺아보며 최선의 맥락을 수립해야한다.
Atomic Design이 필요한 이유는 무엇일까?
- 이는 이론일 뿐이며, 사실 우리는 은연 중에 해당 디자인 시스템을 따르고 있다. 직접 페이지에 놓여있는 내용을 기초 단위부터 하나하나 배치하면서 우리는 원시적인 디자인 시스템을 따르고 있었던 것이다. 또한 추상적인 개념에서 구체적인 배치까지 모두 따라갈 수 있다는 점에서 이러한 디자인 방법은 가치를 가진다. 만들어 놓고 분해해서 조립하는 것이 아닌, 하나하나 조립하면서 만들면서 우리는 더 안정적이고 탄탄한 결과물을 만들 수 있다.
3. 리액트가 추천하는 프로젝트 구조 설계 방법
- 리액트의 공식 문서에도 폴더 구성에 있어 정답은 없다고 말하고 있다. 동시에 다양한 폴더 구성법에 대해 소개하고 있는데, 한번 보도록 하겠다.
- 파일 유형에 의한 분류
- 예시와 같이 컴포넌트나 api등의 비슷한 유형을 가진 것들끼리 묶어주는 방법이다. 여기서 파생된 것이 Atomic Design인데, 이 방법에서 더 나아가 애플리케이션 내의 역할에 따라 컴포넌트를 폴더 별로 또 분리하는 것을 말한다.
- 기능, 라우트에 의한 분류
- 기능에 따라서 css, js, test파일을 한 폴더에 같이 두는 방법. 어떠한 기능으로 최상위 폴더를 나눌 것인지에 대해 고민하면서 서비스에 대한 주요 기능을 생각해볼 수 있다.
중첩을 피하고, 깊게 사고하지 마라
- 위와 같은 폴더 구성법을 제안함과 동시에 리액트 공식문서에는 다음과 같은 말이 함께 제안된다. 우선 디렉토리를 중첩해서 깊게 만들어놓을 수록, 추후에 상대 경로 및 파일 import에 있어 어려워진다는 것이다. 깊게 폴더 구조를 만드는 것이 필수적인 게 아니라면, 3~4번 정도의 폴더 깊이를 권장하고 있다.
- 초심자일 수록 파일 구조를 선택하는 것에 대해 많은 사고를 하지 말자. 프로젝트가 점점 커질 수록 자연스럽게 폴더 구조에 대한 고민을 하게 될 것이고, 자주 수정하는 파일과 찾게 되는 폴더에 대한 기준이 생길 것이다. 그러한 고민을 하게 되었다면 자주 변경하는 파일을 묶어서 보관하는 방법인 코로케이션(colocation)을 사용한다거나, 앞서 설명한 방법을 섞어서 어울리는 프로젝트에 적재적소에 사용할 수 있다.
4. 참고자료 및 더 읽어보면 좋은 자료
반응형
'Web' 카테고리의 다른 글
| sopt 웹잼 | 데모데이 d-7을 남겨놓고 적는 회고록 (0) | 2023.07.16 |
|---|---|
| [React] 리액트에서 상태관리와 렌더링을 효과적으로 하기 위해 고려해야할 점 (0) | 2023.05.07 |
| 프론트엔드 개발자가 바라볼 수 있는 웹 최적화 (0) | 2023.04.09 |
| [공유] 주니어 프론트엔드 엔지니어에서 벗어나는 방법 (0) | 2022.12.29 |
| [TS #1] 기본 개념, 예제 (기본 타입, interface, 함수) (0) | 2022.08.17 |
