[0902] 리액트 폴더 아키텍처 구성

한달인턴 과제로 쓸 리액트 폴더 아키텍처를 좀 조사하려고 React package structure라고 검색했는데 자료가 나왔다.

React Js — 8 best practices + Folder Structure | kthamodaran 다음 내용을 번역한 것이다.

---

1. 디렉토리 구조

폴더 구조의 가장 중요한 장점은 한번에 한가지 특징에 속하는 파일들은 파악할 수 있다는 것
→ 유지 보수에 좋음

2. common modules에 집중해라

리액트는 개발 복잡성을 줄이고, 재사용성 높은 구조를 만드는데 도움을 줌
→ common modules(재사용 가능한 커스텀 컴포넌트, 커스텀 훅, 비즈니스 로직, 상수, 유틸 함수 등)에 집중하여 다양한 컴포넌트, 뷰, 프로젝트에서 바로바로 쓸 수 있도록 해라

3. 커스텀 컴포넌트를 폴더에 넣어라

커스텀 컴포넌트를 폴더에 넣으면 프로젝트를 체계적으로 정리하고 탐색하기 쉽게 한다.
커스텀 컴포넌트를 기본 컴포넌트로부터 분리하여 재사용성, 접근성, 유지보수성, 확장성을 높인다.
ex)

└── /Button
  └── Button.js
  └── Button.css
  └── Button.test.js

4. 커스텀 훅을 만들어라

커스텀 훅은 코드 복잡성을 줄여준다.
다수의 페이지에서 공통된 기능이 포함되면 코드를 여러번 작성하는 대신 커스텀 훅으로 분리하여 1번만 작성할 수 있다.

5. 절대 경로 import를 사용해라

import { Button } from '../../components'; // (x)
import { Button } from '@/components'; // (o)

config 설정해줘야 함. 시도해보려고 했는데 실패했음 ㅎㅎ;

6. single context 피하라

여러개의 컴포넌트 간의 상태를 공유할 때, props drilling 대신 React Context 등의 multiple contexts를 이용해라.
→ 복잡성 줄임

7. UI로 부터 비즈니스 로직을 분리해라

커스텀 훅을 사용
→ 소스 코드 품질 향상

8. utils 디렉토리를 사용해라

utils 폴더는 리액트 앱에서 바로 사용할 수 있는 도움 기능으로 구성
깨끗한 코드 유지와 소스코드 품질 향상에 도움이 되므로 권장됨

참고 자료

React Js — 8 best practices + Folder Structure | kthamodaran