실무에서 사용하는 폴더 구조는 여러방법이 존재하는데
이러한 방법들을 패턴이라고 한다.
패턴
패턴이라는 것은 여러 개발자들이 각자의 방식대로 효율적인 구조를 만들어
사용하였는데 나중에 보니 개발자별로 좋다고 생각하여 사용한 방식이 비슷해
다듬어져 하나의 방법으로 굳어진 것을 패턴이라 한다.
리액트에서 사용하는 유명한 패턴으로는
container / presentational 패턴과
atomic 패턴이 있다.
그 중에서도 Atomic 패턴에 관해 다루겠다.
1. Atomic pattern
attomic 패턴이란 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미한다.
이렇게 하는 이유는 컴포넌트의 중복을 최소화하기 위함이다.
사진과 같이 Atoms , Molecules, Organisms, Templates, Page
이렇게 5개의 폴더로 나누어서 관리하며
각각의 의미는 화학의 원리를 이용하여 만든다.
2. Atomic 패턴의 장점
- Atomic 패턴은 디자이너의 세계에서도 유명한 패턴이기 때문에 이 패턴에 능숙하면 디자이너들과의 협업시에 유리하고, 프로젝트 시작부터 체계적인 UI적 설계가 가능하다.
- 디자인을 쉽게 수정할 수 있다.
컴포넌트가 단위별로 이루어져 큰 컴포넌트에서 작은 컴포넌트를 삭제, 추가, 수정하는 것이 수비다. - 재사용 가능한 설계 시스템을 제공한다.
컴포넌트들을 혼합해 일관성 있고 재사용의 효율을 높이는 디자인이 가능하다.
3. Atomic 패턴의 단점
- 프로젝트 시작부터 UI를 디자이너와 함께 전체적인 설계를 해야하기 때문에 개발준비에 많은 시간이 소요된다.
- 컴포넌트의 분류가 모호하고 복잡하다.
- 러닝 커브가 매우 높다.
따라서 시간, 비용, 팀의 상황 등에 따라 상황에 맞는
패턴을 사용하는 것이 좋다.
Developer