[리엑트] Atomic folder design
리엑트는 컴포넌트 단위로 이뤄진 앱을 제작하는 라이브러리로 각각의 컴포넌트들을 재사용 가능하게 제작하여 작업의 효율을 극대화 하는 장점을 가지고 있다.
이를 활용하기 위해 리액트는 프런트엔드 개발을 위해 설계 우선 접근법을 권장한다. UI/UX 팀은 개발자들이 구현할 수 있는 목업을 만들 것이며(mocking), 개발자들은 이를 이용해 UI를 컴포넌트 계층으로 세분화 할 수 있다.
오늘은 이를 개발론적인 방법으로 접근하는 atomic folder design에 대해 이론적인 부분만 정리해보자 한다.
1. atomic folder design 이란?
이름 그대로 원자들로 이뤄진 폴더 디자인 패턴을 말하는데 이를 가장 쉽게 설명한 그림은 아래와 같다
위의 이미지를 보면 원자가 모여 분자를 이루고 분자가 모여 물질을 형성하듯 컴포넌트를 기능 단위로 쪼개고 쪼갠 컴포넌트를 조합하여 원하는 앱을 만드는 것을 뜻한다.
실제로 이 개념을 정리하면 위와 같이 각각 하나의 기능(컴포넌트)를 분할하고 이를 합쳐 molecules를 만들고 이를 합쳐 최종적으로 page를 이루는 방식이다.
2. 규칙
atomic folder desing 패턴은 강력한 규칙을 적용하는데 이를 통해 재사용성 증가, 관리 이슈 최소화와 같은 효율성을 추구한다.
- 원자에 margin이나 position과 같은 위치에 영향을 주는 속성을 지정하지 않는다. (페이지내에서 사이드 이펙트를 일으킬 수 있음)
- 컴포넌트들은 상태를 가지지 않아야 한다.
- 오직 분자나, 유기체만이 원자들의 위치를 지정할 수 있으며 마찬가지로 자기 자신의 position과 margin을 지정해선 안된다.
- 템플릿은 오직 그리드만을 가져야하고, 특정 컴포넌트의 위치를 지정해선 안된다.
- 템플릿위에 컴포넌트를 렌더링하여 페이지를 완성시킨다.
- 변수를 모아두는 파일(테마나 색상 변수값들)을 만들고 모든 아토믹 컴포넌트가 이 변수를 사용하게끔 만든다.
3. 적용 방법
3.1 Atoms
- 해당 설계의 최소 단위
- form, input ,button 같은 HTML의 태그나 최소의 기능을 가진 기능의 커스텀 태그 컴포넌트
- 설계에 따라 속성에 따른 스타일 주입이 들어갈 수 있습니다.
3.2 Molecules
- Atom들을 최소의 역할을 수행할 수 있게 합한 그룹
- 입력을 받기 위한 form + label + input이 해당 됩니다.
3.3 Organisms
- 배치를 위한 layout 단위로 하나의 인터페스를 형성하는 그룹
- header, navigation 등이 이에 해당됩니다.
3.4 Templates
- 실제 Organisms들을 레이아웃이나 데이터 흐름을 연결합니다.
- 클래스 시스템의 클래스로, 객체의 설계도, 페이지의 설계도입니다.
3.5 Pages
- 정의된 Template에 데이터를 넣어 뷰를 완성시키는 단계입니다.
- 클래스 시스템의 인스턴스, 객체의 구현체, 페이지 설계도로 그린 페이지 그 자체입니다.
참고 레포지토리
https://github.com/diegohaz/arc/tree/master/src-example/components
- 참고 -
https://ui.toast.com/weekly-pick/ko_20200213