[리팩토링 #02.] 아토믹 디자인 패턴 Atomic Design Pattern 적용하기

아토믹 디자인 패턴

 

 

원래는 /components 내에 모든 컴포넌트 코드들을 한꺼번에 집어넣었었는데
리팩토링을 진행하면서 아토믹 디자인 패턴을 적용하기 위해 디렉토리 구조를 /atoms, /molecules, /organisms, /templates, /pages로 나눴다. 그리고 /pages는 원래부터 /components 밖에 있었기 때문에 그냥 그 위치를 유지하기로 했고 나머지 디렉토리는 /components 내에 위치하도록 했다.

 

 

• /atoms
  가장 작은 컴포넌트 단위이므로 <button>, <h1>, <input> 같은 html 요소들.
• /molecules
  atom들의 조합
• /organisms
<header>와 <footer> 같은, atom들과 molecule들의 조합.
• /templates
  페이지의 레이아웃, organism들의 조합.
• /pages

 

 

느낀 점

 

 

atom, molecule 그리고 가장 큰 단위인 page 까지는 명확하게 나누기 쉬웠는데 organism과 template은 분류하기 모호한 면이 있었다. molecules 디렉토리 하위에 각각의 페이지를 폴더로 만들어서 그 페이지에서 사용되는 molecule들을 집어넣었다. 그래서 명확한 atom, page에 해당하는 것을 제외하고 나머지 대부분의 컴포넌트들은 molecule로 분류하고 page는 molecule들의 조합으로 구성했다.

그리고 딱 떼어서 다른 프로젝트에 사용할 수 있을 정도의 컴포넌트(header나 footer, bookCard 등)은 organism으로 분류했다.

 

다음 프로젝트에 아토믹 디자인 패턴을 적용한다면 이 분류를 무조건 모두 따를 필요는 없을 것 같고 팀원과의 의논을 거쳐서 이 5개의 분류 중에서 3~4개 정도만 선택해서 디렉토리를 분류해도 좋을 것 같다. 중요한 것은 명확한 코드 구조와 가독성, 유지보수 용이성이라고 생각하기 때문에 프로젝트의 규모에 따라 꼭 모든 프로젝트에 이러한 디자인 패턴을 적용할 필요는 없겠지만, 여전히 이 디자인 패턴을 알고 있다는 것은 코드의 유지보수 측면에 큰 도움을 줄 수 있을 것이라 생각한다.

 

 

코드 리팩토링 후

 

 

/src
|-- components
|   |-- atoms
|   |   |-- Button.tsx
|   |   |-- H1.tsx
|   |   |-- Input.tsx
|   |-- molecules
|   |   |-- BookDetail
|   |   |   |-- BookAddButton.tsx
|   |   |   |-- BookMetaData.tsx
|   |   |-- BookSearchResult
|   |   |   |-- BookMarkBtn.tsx
|   |   |   |-- NoResult.tsx
|   |   |-- BookShelf
|   |   |   |-- BookRemoveBtn.tsx
|   |   |   |-- HashtagInput.tsx
|   |   |   |-- Hashtags.tsx
|   |   |   |-- Rating.tsx
|   |   |   |-- Tag.tsx
|   |   |   |-- Tags.tsx
|   |   |-- FixedButtons
|   |   |   |-- DarkModeBtn.tsx
|   |   |   |-- ScrolTopBtn.tsx
|   |   |-- LoginForm
|   |   |   |-- LoginButtons.tsx
|   |   |   |-- LoginFormField.tsx
|   |   |-- NavBar
|   |   |   |-- LoggedInButtons.tsx
|   |   |   |-- LoggedOutButtons.tsx
|   |   |   |-- Logo.tsx
|   |   |   |-- SearchInput.tsx
|   |   |-- SignUpForm
|   |   |   |-- SignUpButtons.tsx
|   |   |   |-- SignUpError.tsx
|   |   |   |-- SignUpInputs.tsx
|   |   |-- TitleAndAuthorInfo.tsx
|   |-- organisms
|   |   |-- Skeletons
|   |   |   |-- SkeletonBookDetail.tsx
|   |   |   |-- SkeletonSearchResult.tsx
|   |   |-- BookSearchResultCard.tsx
|   |   |-- BookShelfCard.tsx
|   |   |-- Footer.tsx
|   |   |-- Navbar.tsx
|   |   |-- ProtectedRoute.tsx
|   |-- templates
|   |   |-- BasicLayout.tsx
|-- pages
|   |-- BookDetailPage.tsx
|   |-- BookSearchResultPage.tsx
|   |-- BookShelfPage.tsx
|   |-- ErrorPage.tsx
|   |-- HomePage.tsx
|   |-- LogInPage.tsx
|   |-- RoutesPage.tsx
|   |-- SignUpPage.tsx

 

 

확실히 컴포넌트를 찾기 위해 덜 헤매게 되었고 (👍)
페이지 컴포넌트가 리턴하는 코드들의 구조가 한 눈에 파악하기 쉬워졌다는 장점이 있지만 여전히 molecule, organism, template 이 세개의 분류는 참 헷갈리고 또 명확한 답이 없는 것 같다.

그냥 공통적으로 사용되는 ui 컴포넌트들을 /common으로 분류하고 각 페이지에 따른 디렉토리를 만들어서 각각의 페이지에서 사용되는 컴포넌트들을 넣는 것 정도로만 해도 괜찮은 방법이 될 것 같다.