directory structure

디렉토리 구조

컴포넌트 구조

styled components 관리

링크의 MultipleComponentsOneStyleFile 방식을 따르기로 한다.

MultipleComponentsOneStyleFile
  |-- Button.js
  |-- Header.js
  |-- Wrapper.js # Wrapper.js 보다 명확한 이름을 사용하도록 한다.
  |-- styles.js
  |-- index.js

에서 Button.js, Header.js, Wrapper.js 를 styles.js에서 묶는다. index.js는 styles.js 만 import 하여 styled component를 적용한다.

하위 컴포넌트 관리

특정 컴포넌트(A)에만 사용되는 하위 컴포넌트(B)는 A의 하위 디렉토리에 넣는다.

containers, components 디렉토리

• components 디렉토리에는 다른 컴포넌트 혹은 여러 containers에서 2번 이상 사용되는 컴포넌트를 넣는다.
• containers 디렉토리에는 Page 컴포넌트가 들어간다.
• 어떠한 컴포넌트가 특정한 Page에서만 사용된다면, 해당 Page 컴포넌트 하위 컴포넌트에 넣는다.