[React]파일 구조 파악하기(Atomic design) #2

김태훈·2022년 1월 14일
1

React

목록 보기
4/9

이번에는 저번 export와 import에 이어 프로젝트를 진행할 때에 있어서 파일이 어떻게 구성되는지를 확인해봅시다. 리액트 공식 문서를 확인해 보시면 리액트는

1. 파일의 기능이나 라우트에 의한 분류

2. 파일 유형에 의한 분류

위의 두 가지 분류법이 대표적이라고 말하는데요..

첫 번째의 분류는 CSS, JS 그리고 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법입니다.

위의 사진을 보면 다른 확장자 파일들이 하나의 폴더에 묶여있는 것을 확인할 수 있습니다. 이렇게 분류하는 방법을 파일의 기능이나 라우트에 의한 분류라고 합니다.

두 번째의 분류는 비슷한 파일끼리 묶어주는 것입니다.

위 사진을 참고하면 API의 기능을 담당하는 파일, components를 담당하는 파일로 나뉜 것을 확인할 수 있으실 겁니다. 이처럼 비슷한 파일끼리 묶어주는 분류 중 대표적인 방법으로 바로 아토믹 디자인이 있습니다.

아토믹 디자인(Atomic Design)이란 말 그대로 atom(원자)가 모여 분자가 되고 분자가 모여 유기체가 되는 것처럼 작은 단위의 코드들이 서로 모이면서 한 단계 더 큰 구조를 이루게 되는 디자인 시스템을 말합니다.


즉, Atoms(원자) > Molecules(분자) > Organisms(유기체) > Templates > Pages 순으로 작은 것들이 모여 점층적으로 페이지를 만들어 나가는 디자인 시스템인 것입니다.

이러한 디자인의 장점은 재사용이 용이하고, 컴포넌트들이 작게 작게 이루어져 있어 디자인 수정 또한 편리합니다. 반면에 그만큼 디자인의 설계에 오랜 시간이 걸리고 작은 것들부터 설계를 해야 하기에 전체적인 일관성이 떨어질 수 있다는 단점을 가지고 있습니다.

이상으로 React의 파일 구조 중 아토믹 디자인에 대해 알아보았습니다.
다음 번에는 container - presenter 패턴을 알아보도록 하겠습니다.

profile
1일 1커밋 1블로그!

0개의 댓글