좋은 폴더 구조란 무엇일까? 아직 왕초보 단계인 나로서는 js 와 react를 배우기에 급급하지만 한편으로는 그룹 프로젝트와 최근 스터디에서 느낀 폴더구조의 중요성 이란 주제에 대해서 생각하게 되었다.
여러 가지 방법이 있다곤 하지만 가장 핫하고 최근에 발표된 폴더구조론은 아토믹 패턴 디자인이라고 한다.
화학식에서 영감을 받은 이 폴더 구조론은 원자 -> 분자 -> 유기체 -> 템플릿 -> 페이지 순으로 폴더를 만들어 분류하는 것이다.
React라는 라이브러리를 쓰게 되면서 재사용 가능한 컴포넌트가 생겼다는 걸 알았고 그 컴포넌트를 쉽게 다른 페이지에 삽입해서 공통된 부분을 쉽게 만들 수 있었다. 이 과정에서 우리가 주로 쓰는 기본적인 컴포넌트들을 어떻게 분류해야 하는지에 대한 문제는 꽤 어려웠다.
아무리 공통 컴포넌트라는 폴더를 만들고 제작한 컴포넌트를 넣어도 이리저리 분산되어서 결국 사용하기 어렵게 되고 뭐가 뭔지 찾을 수가 없었다.
위 그림은 아토믹 디자인 패턴을 그림으로 쉽게 표현한 것이다.
- 원자
가장 기본적인 빌딩블록이다.
레이블, 인풋 필드, 버튼 같은 가장 작은 ui 단위를 뜻한다.
이들 자체로는 큰 의미는 없지만 다른 구성요소를 만드는 데 사용된다.
2.분자
원자를 결합하여 만든 더 큰 ui구조이다.
예를 들어 인풋 필드, 버튼, 레이블을 결합한 폼이 분자에 해당한다.
분자 자체로 하나의 기능을 제공한다.
-
유기체
분자와 원자들이 결합해 더 복잡한 ui구조를 만든다.
예를 들어 로고, 내비게이션,검색바 등 요소를 포함하는 내비게이션 바가 유기체에 해당한다. -
템플릿
유기체와 분자들을 결합하여 페이지의 레이아웃을 결정한다.
구체적인 내용을 삽입하지 않고, 콘텐츠의 구조와 ui의 흐름을 정의한다. -
페이지
템플릿의 구체적인 정보와 데이터를 삽입하여 실제화면을 만든다.
사용자에게 보이는 실제 화면으로 상호작용을 한다.
위에서처럼 가장 작은 단위부터 만들어 가며 문제를 조기에 진단 할 수 있고 재사용 가능한 컴포넌트를 미리 만들어서 일관된 디자인과 레이 웃을 유지 하고 효율성을 극대화할 수 있다.
위 사진은 아토믹 디자인 패턴을 알기 쉽게 만들어 놓은 표이다.
기본적인 원자에서 분자 유기체 템플릿 페이지까지 제작하는 과정을 담고 있다.
출처 [TOAST UI]
하지만 이런 아토믹 디자인 패턴도 프로젝트 규모가 커지고 다양한 페이지를 제작할수록 중간 단계에서 어디로 분류해야 하는지 모호한 부분이 생긴다.
다양한 기능 혹은 PROPS를 요구하는 상황에서 원자단위의 컴포넌트에 수정된 컴포넌트를 추가하는 일이 생길 수도 있고 그렇게 된다면 원자단위의 기초 컴포넌트가 관리가 되지 않아 난잡해지는 부작용이 생긴다.
그러므로 가급적 원자단위의 컴포넌트는 보수적으로 관리하고 이벤트 핸들링 등은 수동적으로 유지해야 합니다. 데이터값 변경 등은 분자 단위에서 추가 관리하는 것이 최대한 안정적으로 아토믹 디자인 패턴의 장점을 살리는 프로그래밍 폴더 관리일 것이다.
