[React]아토믹 디자인(Atomic Design) 패턴

디자인 패턴이란 프로그램 개발 과정에서 사용되는 설계 패턴을 정의한 것이다.

React, Vue, Angular 등으로 프론트엔드 개발 시 컴포넌트 단위로 개발을 진행하는데,

컴포넌트를 어떻게 구성할 것인지에 대한 고민을 디자인 패턴이 해결해 줄 수 있다. 

디자인 패턴 중 아토믹 디자인에 대해 알아보자!

 

 

• 아토믹 디자인이란?

아토믹 디자인을 검색해보면 위의 사진이 가장 많이 나온다.

화학시간에 듣던 용어들이 나와서 처음엔 당황했다.

찾아보니 아토믹 디자인은 화학적 관점에서 영감을 얻어 탄생한 디자인 시스템이라고 한다.

가장 작은 단위인 원자부터 시작해서 페이지까지 컴포넌트를 5가지 단계로 나누는 방법이다.

 

- ATOMS

• 디자인의 최소단위로 더 이상 분해할 수 없음
• label, input, button, title

 

- MOLECULES

• Atoms를 모아서 만들어지고 최소 한 가지 기능 수행
• button을 클릭해서 form을 전송하는 molecule
• 키워드 전송이 필요한 곳에서 재사용 가능

 

- ORGANISMS

• Molecules + Atoms를 모아서 만들고, 사용자에게 의미와 역할이 존재함
• logo(atom), navigation(molecule), search form(molecule)이 모여있음
• molecule에 비해 상대적으로 재사용성이 낮음

 

- TEMPLATES

• 데이터는 연결되어 있지 않은 최종 레이아웃 형태로 여러 개의 Organisms으로 구성됨
• 페이지에 대한 골격 구조

 

- PAGES

• Template에 실제 데이터가 결합되어 있는 최종 디자인의 형태

 

• 아토믹 디자인의 장단점

 

장점

• 컴포넌트의 재활용성을 극대화할 수 있다.
• React 렌더링 최적화에 효과적인 설계 방법이다.
  상태 변화에 따른 렌더링이 작은 범위로 이루어져 성능 최적화시키기에 좋다👍
• UI를 일관되게 만들 수 있다.
• 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트 할 수 있다.

단점

• 컴포넌트에 대한 유지보수가 어려워진다. 컴포넌트들이 많아지므로 관리해야 할 대상이 많아진다.
• Molecule과 Organism을 나누는 기준이 모호하다.
• 컴포넌트에 변화가 생긴 경우, props를 추가할 것인지 새로운 컴포넌트를 생성할지 선택해야 한다.
• 페이지에서 원자까지 props를 전달하며 props drilling이 발생한다.

 

• 아토믹 디자인 규칙

1. 원자에 margin, position 같은 위치에 영향을 주는 속성 지정 X
2. 컴포넌트들은 상태를 가지지 않음
3. 분자나 유기체만이 원자들의 위치를 지정할 수 있으며,
   자기 자신의 position과 margin을 지정해선 안됨
4. 템플릿은 오직 그리드만을 가져야하고, 특정 컴포넌트의 위치 지정 X
5. 템플릿 위에 컴포넌트를 렌더링하여 페이지를 완성
6. 변수를 모아두는 파일(테마, 색상 변수 값)을 만들고, 모든 아토믹 컴포넌트가 이 변수를 사용하게끔 만들어야 함

 

추가로 폴더구조는 아래와 같이 생겼다!