아토믹 패턴(Atomic-patten)

Jeong-Taek·2022년 10월 23일
0

Atomic-patten(아토믹 패턴)이란?

atomic패턴이란 무엇인가?
리액트를 배우면서 컴포넌트를 나누는 여러 방식을 배웠는데 그중 가장 기억에 남았던 내용이 아토믹 패턴으로 컴포넌트를 나누는 방식이었다.

atomic패턴은 소스코드를 아주작은 컴포넌트 단위로 쪼개는 것을 의미한다.
이유는 컴포넌트 중복을 최소화 하기위해서..
총 5개의 폴더구조로 이루어 지는데 각각의 의미는 화학의 원리를 이용해서 만들어진다.

아래 이미지를 참조해보자.

위 이미지를 보면 아토믹 패턴의 구조는
atoms, molecules, organisms, templates, pages 총 5개의 폴더로 나누어 컴포넌트를 관리하게 된다.

이러한 atomic패턴은 개발자들 사이에서 뿐만 아니라 디자이너 세계에서도 많이 알려진 패턴이다.
그렇기 때문에 잘 알아만 논다면 디자이너와의 협업에서도 강점이 될 수 있음.
프로젝트 시작부터 체계적인 UI설계가 가능해진다.
하지만 단점으로는 모든 UI를 디자이너와 함께 처음부터 설계해야 하므로 개발준비까지 걸리는 시간이 오래걸리게 된다.
(상황에 맞추어 사용하느게 좋음)

결론

  • atomic패턴은 소스코드를 아주 작은 컴포넌트 단위로 쪼개는 방법이다.
  • 컴포넌트 중복을 최소화하기 위해서 사용됨.
  • 총 5개의 구조로 atoms, molecules, organisms, templates, pages로 나뉜다.
  • 개발자들 뿐만 아니라 디자이너 세계에서도 atomic패턴이 널리 알려져 있다.

0개의 댓글