리액트는 생태계는 컴포넌트 기반 프로그래밍이다
리액트 공식문서에 설계 패턴에 대한 모범 사례가 많이 없고, 대부분 개발자 편의에 따라서 구조를 짜는 경우가 많기 때문에 위반하기 쉽다.
아토믹 디자인
화학용어인 원자(atomic) 구조와 유사하게 다음과 같은 효과적인 인터페이스를 사용한다.
원자(Atoms) - 분자(Molecules) - 유기체(Organisms) - 템플릿(Tamplates) - 페이지(Pages)
원자: 버튼, 제목, 텍스트 같은 가장 기초가 되고, 가장 작은 구성 요소이다.
분자: 2개 이상의 원자로 구성이 되어있다. 하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹이다.
유기체: 분자, 원자 또는 다른 유기체의 그룹으로 구성될 수 있다. 유기체들은 개별적인 영억을 형성한다.
템플릿: 컴포넌트들을 배치하고 설계 구조를 담당한다. 컴포넌트가 없을 경우 페이지가 어떻게 보일지 골격을 보여주는 역할을 한다. 분자, 원자, 유기체를 포함하고 있다.
페이지: 대표 콘텐츠가 있는 UI의 모습을 보여주는 템플릿의 특정 인스턴스이다.
페이지, 템플릿, 유기체, 분자, 원자 등을 결합하면 애플리케이션의 사용자 인터페이스를 구성할 수 있다. (Atomic Design 전체를 잘 보여주는 gif가 있어서 가져왔다)
폴더 구조를 예시를 들면 아래와 같이 CLIENT폴더 아래에 컴포넌트를 구성하는 폴더를 생성하고 또 안에서 UI를 구성하는 폴더로 나눌 수 있다.
장점
- 컴포넌트가 분리되어 있으면 어플리케이션과 분리해서 개발할 수 있고 style guide에서 예를 들면 story book과 같은 라이브러리에서 개발하고 테스트하기 용이하다.
- 백엔드 어플리케이션의 로직에 의존하지 않을 수 있다.
- 패턴이 확립되면 재사용하거나 유연성있는 빌드 프로레서를 가질 수 있다.
- CSS관리에 용이하다. 어플리케이션 구조에 따라서 사용되는 CSS만 렌더링하도록 해야한다.
단점
- 분리된 컴포넌트에서 상위 요소에서 스타일을 결정할 수 없을 경우에 media query를 사용하기 복잡해진다. 이는 반응형 화면을 구성할 때 까다롭다. 컴포넌트의 실제 사이즈를 알 수 없기 때문에 실제 페이지의 사이즈가 변경될 때 크기가 조정된다.
(이부분은 flex나 grid를 사용해서 해결 할 수 있다)
앞서 설명한 것들을 통해서 폴더 구조를 구체화 할 수 있다. 폴더 구조는 코드 베이스에 따라서 달라질 수 있으니 반드시 팀원하고 상의하고 구현해야 한다.
✍ reference URL
https://andela.com/insights/structuring-your-react-application-atomic-design-principles/
