개요

프론트엔드의 도전적사항 중 하나로, 특정 디자인패턴을 적용해보려고 했습니다.

유명한 패턴들인 FSD,아토믹,HOC을 후보로 선정했고, 그 중 평소에 시도해보고싶었던 아토믹패턴을 와치덕스에 적용했습니다.

아토믹패턴이란

웹 프론트 개발에서 프레임워크, 라이브러리인 Angular, Vue, React는 컴포넌트 단위로 개발을 진행합니다.

이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이 아토믹패턴입니다.

아토믹패턴은 원자(Atom),분자(Molecule),유기체(Organism),템플릿(Template),페이지(Page)로 인터페이스 시스템을 구성합니다.

각 단계별로 살펴봅시다.

Atom

atom은 더 이상 분해할 수 없는 기본 컴포넌트 단위입니다.

label,input,button같은 기본 HTML태그에

글꼴, 애니메이션 등 같은 추상적인 요소도 포함할 수 있습니다.

Molecule

molecule은 여러개의 atom을 결합하여 자신의 고유한 특성을 가집니다.

molecule의 중요한 점은 한 가지 일을 하는 것입니다. SRP(Single Responsibility Principle) 원칙으로 인해 키워드 전송 기능이 필요한 곳에서 재사용될 수 있습니다. molecule의 SRP는 재사용성과 UI에서의 일관성, 테스트하기 쉬운 조건이라는 이점을 가집니다.