폴더 구조 계획하기

[som-syom]

폴더 구조

src
├── Assets
├── Components
│   ├── Common
│   │    ├── Button
│   │    └── Modal
│   ├── MessengerHeader
│   ├── MessageInput
│   │    ├── MessageTextArea
│   │    └── index.tsx
│   ├── MessageList
│   │    ├── Message
│   │    └── index.tsx
│   └── MessengerLogin
├── Pages
├── Store
│   ├── Actions
│   │    ├── message
│   │    ├── modal
│   │    └── types.ts
│   ├── Reducers
│   │    ├── index.ts
│   │    ├── message
│   │    └── modals
│   └── index.ts
├── Utils
│   ├── Constant
│   ├── Interface
│   └── Styles
│        ├── _mixins.scss
│        ├── _reset.scss
│        └── _variables.scss
├── App.scss
├── App.tsx
└── index.tsx

폴더 구조

• 큰 단위인 영역별로 폴더를 나눕니다.
• 해당 영역 폴더 내에 나눌 수 있는 molecules 정도의 단위로 컴포넌트를 분리합니다.

폴더 내에 컴포넌트를 분리한 이유

• 리액트에서 컴포넌트를 재활용하는 것은 기본지만 현재 프로젝트 내에서는 재활용할만한 atoms 개체가 같은 template 단위 내에서만 재활용이 이루어질 것 같아 폴더 내에 컴포넌트를 분리하였습니다.

[som-syom]

common - button, modal 추가