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

358

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

작은 토이 프로젝트를 진행하거나, 새롭게 배운 개념 또는 라이브러리를 시험해 볼 때, 체계

적인 구조나 계획 없이 무작정 개발을 시작하는 경우가 있습니다. 이렇게 되면

CSS

, 헬퍼 컴

포넌트, 이미지, 페이지 컴포넌트 등이 모두 한 폴더에 뒤섞여 있게 될 수도 있습니다. 하지

만 프로젝트가 점차 커지게 되면 이런 방식으로는 프로젝트를 관리하기 곤란해집니다. 따라

서 어느 정도 규모가 있는 코드베이스는 논리적인 기준에 따라 애플리케이션 폴더 구조를 정

리해야 합니다. 이때 파일과 컴포넌트를 구성하는 방법은 개인 또는 팀의 선택에 달려 있으

며, 일반적으로 애플리케이션 도메인과 사용 기술에 따라 달라집니다.

이번 장에서는 리액트 애플리케이션의 폴더 구조에 초점을 맞춰, 프로젝트가 커짐에 따라 폴

더 구조를 더 효율적으로 관리하는 방법을 살펴보겠습니다.

14.1

소개

리액트 자체는 프로젝트 구조에 대한 가이드라인을 제공하지 않지만, 주로 사용되는 몇 가지

접근 방식을 제안합니다. 우선 복잡한 프로젝트와

Next

.

js

애플리케이션을 위한 폴더 구조를

살펴보기 전에, 이러한 접근 방식의 장단점을 살펴보겠습니다.

리액트 애플리케이션에서 파일을 그룹화하는 방법

01

은 크게 두 가지가 있습니다.

기능별 그룹화

각 애플리케이션 모듈, 기능