react의 또다른 폴더구조 - atomic pattern

연관 내용
[container/presentational pattern]

react에서 사용하는 유명한 패턴으로는 container/presentational 패턴과 atomic 패턴이 있다.
나는 container/presentational 패턴을 사용했다.

atomic 패턴

• 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법이다.
  (컴포넌트의 중복을 최소화 하기 위함)

• 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다.

• 총 5개의 폴더 구조로 이루어지며, 각각 화학의 원리를 이용하여 만든다.
  

Good

• 프로젝트 시작부터 체계적인 UI적 설계가 가능해지고, 디자이너와의 협업에 유리해질 수 있다.

• 각각의 컴포넌트의 계층 구조를 판단하기도 쉽고 알아보는 것도 쉽다.

• 디렉토리명이 A, M, O, T로 영어 순서에 맞아서 아래 디렉터리로 갈수록 상위 컴포넌트가 되어 시각적으로 직관적이다.

Bad

• 프로젝트 시작부터 UI를 디자이너와 함께 전체적으로 설계해야해서 실제 개발 준비까지 걸리는 시간이 오래 걸릴 수 있다.

• 컴포넌트 간 의존성과 복잡도가 생각보다 까다로울 수 있다.

• 기획상 잦은 변화가 누적되면서 각각을 구성하는 컴포넌트가 많아지면 각 원자 컴포넌트가 어떤 기능을 하는지 명확히 구분하기 어렵다.