[디자인 패턴] atomic과 container,presenter

요즘 개인적으로 사이드 프로젝트를 진행하는데 있어서 디자인패턴에 대한 고민이 생겼다.

 

기존 내가 사용하던 패턴은 코드캠프에서 배웠던 container-presenter 패턴이었지만,
최근 추세와는 조금은 떨어진 부분이 보여 atomic패턴을 도입해볼까 고민을 하게되었다.

그래서 오늘은 atomic과 container-presenter에 대해서 적어보려고 한다

 

가장 먼저 지금 내가 사용중이었던 디자인 패턴은 container-presenter 패턴인데
container와 presenter는 어떤 역할을 하는 녀석이냐면

container : 로직부분을 담당하는 부분(state관리 변수 및 함수의 생성)

presenter : styled와 전체적인 구조, UI를 담당하는 부분

그러면 이녀석의 장점은 무엇일까?

1. 재사용성을 높일수 있다.
container는 로직부분, presenter는 ui적인 부분을 담당하기에
presenter를 다른 container와 붙혀서 사용할수도 있다.

2.구조를 이해하기 쉽다.
로직과 UI를 별개의 파일로 관리하기 때문에 구조를 이해하기에 좀더 용이하다

 

그러면 이러한 장점이 있음에도 불구하고 atomic구조가 떠오르는 이유는 무엇일까?

atomic구조는 말그대로 atom 사전적으로는 원자라고한다.

그래서인지 atomic구조는 한개의 컴포넌트는 한개의 기능만 담당하게 하는 것을 지향한다

atomic구조는 크게 5단계로 설계를 하는데 아래의 그림을 참고하자

이렇게만 보면 이해가 어려우니 좀더 쉽게 볼수있는 사진도 가져와봤다.

가장 작은 단위인 원자 - 모듈 - 오가니즘 - 템플릿 단계를 거쳐 최종 페이지까지 만들게 되는것이다.

그러면 아토믹 구조가 왜 핫한가? 라고 물어볼수도 있는데
구조만봐도 정말 극강으로 재사용성을 높일수 있다.
다만 상태관리 측면에서 props를 무분별하게 남발하게 되거나 잘못된 props를 받게 되는 경우가 있는데

이러한 부분들은 타입스크립트로 props의 타입을 정의하거나 redux, recoil등을 통해 전역 상태관리를
도입한다면 어느정도 방지가 될수 있을거라 생각한다.

지금의 나로서는 어떤것이 더 좋다 그니까 이것을 도입하고 적용해야된다 라고 이야기 할순 없지만, 내 개인 프로젝트에는 atomic구조를 도입해볼것이다.

다음에는 상태관리에 대해서 알아볼수 있으면 좋겠다! 끝.

사진출처 : https://medium.com/@inthewalter/atomic-design-for-react-514660f93ba 아토믹디자인 for React