자바스크립트 + 리액트 디자인 패턴

359

Chapter 14_

리액트 애플리케이션 구조

14.1.1

모듈, 기능 또는 경로별 그룹화

모듈, 기능 또는 경로별 그룹화의 경우, 파일 구조는 비즈니스 모델이나 애플리케이션

의 흐름을 반영합니다. 예를 들어, 전자상거래 애플리케이션을 개발한다면,

product

,

productlist

,

checkout

등의 폴더를 만들 수 있습니다. 그리고

product

모듈에 필요한

CSS

,

JSX

컴포넌트, 테스트, 하위 컴포넌트, 헬퍼 라이브러리 등을 모두

product

폴더 안에

함께 넣습니다.

common/

Avatar.js

Avatar.css

ErrorUtils.js

ErrorUtils.test.js

product/

index.js

product.css

price.js

product.test.js

checkout/

index.js

checkout.css

checkout.test.js

기능별로 파일을 그룹화하면, 모듈에 변경사항이 있을 때 관련된 모든 파일이 같은 폴더에

모여 있어 변경사항이 특정 코드 영역으로 제한된다는 장점이 있습니다.

하지만 반대로 모듈 간에 공통적으로 사용되는 컴포넌트, 로직 또는 스타일을 주기적으로 파

악해야만 중복을 피하고 일관성과 재사용성을 높일 수 있다는 단점도 있습니다.

14.1.2

파일 유형별 그룹화

파일 유형별 그룹화 방식은 ...