리액트 폴더 구조 우수 사례 - 아토믹 패턴

프로젝트 폴더 관리 방법론 중 하나인 아토믹 디자인 패턴에 대해 소개합니다.

저만의 아토믹 패턴 노하우도 작성했으니 많은 의견 부탁드립니다.

 

아토믹 패턴은 NextJS에서도 일부 확인할 수 있는 패턴입니다.

layout.ts와 page.ts는 아토믹 패턴에서 각각 템플릿과 페이지에 대응됩니다.

1. 아토믹 패턴이란?

오늘날 프론트엔드는 점점 복잡해지며 기능뿐만 아니라 유지보수와 재사용성이 용이한 시스템이 요구됩니다.

Atomic Design은 이러한 문제를 해결하기 위한 방법론 중 하나로 탄생했습니다.

 

아토믹 패턴이란 원자 모형에서 영감을 받아 프로그래밍에 적용한 프로젝트 방법론입니다.

컴포넌트의 크기에 따라 원자, 분자, 구조체, 템플릿, 페이지로 분류해 컴포넌트를 정의합니다.

 

• Atoms(원자): 기본적인 UI (버튼, 인풋, 체크박스 등)
• Molecules(분자): 여러 원자를 조합한 UI (서치 바, 프로필카드, 게시글 등)
• Organisms(구조체): 여러 분자와 원자가 결합된 복잡한 UI (헤더, 목록, 네비게이션 등)
• Templates(모형): 페이지의 구조 (레이아웃)
• pages(페이지): 실제 사용자가 보게될 화면

ㄴcomponents
    ㄴatoms
        ㄴThemeButton.js
    ㄴmolecules
        ㄴPost.js
    ㄴorganisms
        ㄴHeader.js
        ㄴNavigation.js
ㄴlayouts
   ㄴBaseLayout.js
ㄴpages
    ㄴLogin.js

 

아토믹 패턴은 컴포넌트의 크기 단위로 분류합니다.

단위가 클수록 기능과 역할이 거대해집니다.

 

그러나, 아토믹 패턴을 그대로 적용했을 때 문제점이 있습니다.

그래서 제가 겪었던 아토믹 패턴의 단점과 해결법을 공유드리고자 합니다.

반응형

2. 아토믹 패턴 단점

분자와 구조체의 역할이 모호하다.

 

제가 겪은 유일한 단점은 분자와 구조체의 경계가 모호합니다.

다른 역할군(원자, 템플릿, 페이지)은 역할의 경계가 매우 뚜렷합니다.

 

페이지와 레이아웃을 헷갈릴일은 크게 없겠죠.

원자와 분자도 꽤나 명확하게 구분됩니다.

 

그러나 분자와 구조체는 모호함이 있습니다.

어느정도의 크기를 분자라 정의할지 역할의 크기를 정확하기 측정하기 어렵습니다.

 

Post 컴포넌트를 보고 누군가는 분자라고, 누군가는 구조체라 생각할수도 있습니다.

이렇듯 사람마다 역할의 크기와 기능의 중요함을 다르게 생각하다 보니 폴더가 서로 교차오염됩니다.

3. 해결법

molecules 폴더를 제외하자.

 

저는 atoms, organisms, layouts, pages 폴더로 구성합니다.

레이아웃부터는 컴포넌트라고 부르기에는 너무 명확하게 구분되므로 배제하고 설명하겠습니다.

 

원자가 아닌 컴포넌트는 모두 구조체로 간주합니다.

물론, 이렇게 하면 organisms 폴더는 매우 거대해집니다.

 

그래도 모호함이 사라져 개발 동료들과 통일된 코드 패턴을 사용할 수 있습니다.

마치며...

현재 진행중인 프로젝트의 크기를 고려해 적절하게 사용하는 것이 중요합니다.

솔직히, 비대해진 폴더가 부담될정도로 커다란 프로젝트가 잘 없기도 합니다.

추천 포스트

[Modern][리액트] 한국인이 만든 국산 모달 소개

[프로그래밍] 나만의 클린코드