React 디렉토리 구조 고찰

Atomic design : 

https://bradfrost.com/blog/post/atomic-web-design/

https://simsimjae.tistory.com/407

 

 

구성(디렉토리명):

assets /

compoents(atom) /

container(molecules, organisms, templates) /

pages /

services /

hooks

 

container 단위의 컴포넌트는 index.js를 사용해 여러 컴포넌트를 묶어 import 해오자. 그렇게 되면...

 

import 컴포넌트#1 from ""

import 컴포넌트#2 from ""

import 컴포넌트#3 from ""

 

↓↓↓

 

import { 컴포넌트#1, 컴포넌트#2, 컴포넌트#3 } from "--style.js"

 

한줄의 import 로 여러개의 컴포넌트를 불로와 정렬된 형태로 가독성을 높히자.

참고: https://www.youtube.com/watch?v=SdWJj1LSQPE&t=8s

 

https://ui.toast.com/weekly-pick/ko_20200213

---

[Dir] assets

     ㄴ [Dir] images

     ㄴ [Dir] video

     ㄴ [Dir] global

          ㄴ global.style.js

          ㄴ theme.style.js

 

[Dir] components

     ㄴ [Dir] Button

          ㄴ Button.style.js

          ㄴ Button.jsx (atom)

     ㄴ [Dir] HeadLine

          ㄴ HeadLine.style.js

          ㄴ HeadLine.jsx (atom)

     ㄴ [Dir] Logo

          ㄴ Logo.style.js

          ㄴ Logo.jsx (atom)

     ㄴ [Dir] List

          ㄴ List.style.js

          ㄴ List.jsx (atom)

     ㄴ [Dir] Link

          ㄴ Link.style.js

          ㄴ Link.jsx (atom)

     ㄴ [Dir] Description

          ㄴ Description.style.js

          ㄴ Description.jsx (atom)

     ㄴ [Dir] Paragraph

          ㄴ Paragraph.style.js

          ㄴ Paragraph.jsx (atom)

 

     ㄴ [Dir] container

             (container의 성격을 카테고리화 → Forms, Texts, Images, Lists, Sections, Header, Footer etc... 같은 이름으로 디렉토리명)

          ㄴ [Dir] Menu

               ㄴ Menu.style.js

               ㄴ Menu.jsx (molecues)

                     + Link.jsx (atom)

          ㄴ [Dir] Header

               ㄴ Header.style.js

               ㄴ Header.jsx (organism)

                     + Logo.jsx (atom)

                     + HeadLine.jsx (atom)

                     + Menu.jsx (molecues)

          ㄴ [Dir] Card

               ㄴ Card.style.js

               ㄴ Card.jsx (organism)

                     + HeadLine.jsx (atom)

                     + Description.jsx (atom)

                     + Paragraph.jsx (atom)

                     + Button.jsx (atom)

 

[Dir] pages

     ㄴ [Dir] Home

          ㄴ Home.element.js

          ㄴ Home.jsx (page)

                + Header.jsx (organism)

                + Card.jsx (organism)

                + Description.jsx (atom)

                + Paragraph.jsx (atom)

                + Menu.jsx (molecues)

     ㄴ [Dir] About

          ㄴ About.element.js

          ㄴ About.jsx (page)

 

 

[Dir] services

     ㄴ [Dir] firebaes

          ㄴ firebase.js

     ㄴ [Dir] kakao

          ㄴ kakao.js

 

[Dir] Hooks

     ㄴ [Dir] firebaes

          ㄴ firebase.js

 

(참고용)사용 패턴: https://demo.patternlab.io/