atomic pattern에 대하여...

<회고록>

오늘은 atomic pattern에 대해서 작성해볼려고 한다. 내가 atomic pattern에 대해서 공부하게 된 계기는 다음과 같다.

• 첫번째 컴포넌트를 나누는 기준을 명확하게 알고 싶다. 사실 기능적 폴더 구조나 타입별 폴더 구조 모두 컴포넌트를 나누는 기준이 명확하지 않다. 사실상 크게 컴포넌트를 나누는 기준은 알 수 있어도 세부적으로 컴포넌트를 나누는 기준은 알 수 없다. 그래서 나는 세부적으로 컴포넌트를 나누는 기준을 알기 위해서 atomic pattern에 대해서 알아볼려고 한다.
• 두번째 atomic pattern은 사실상 프론트엔드 디자인 패턴에서 유명한 디자인 페턴이다. 그 이유는 명확한 폴더 구조와 명확한 컴포넌트 분리 기준 때문이다. 그래서 나는 어떤 점에서 atomic pattern이 명확한지를 알기 위해서 atomic pattern에 대해 조사하게 되었다.

<atomic pattern 도대체 머야?>

atomic pattern은 원자와 분자들의 개념에서 아이디어를 얻는 방식이다. atomic pattern은 컴포넌트를 굉장히 작은 단위로 쪼갠다음 이렇게 쪼갠 원자들을 작게 붙이고 이렇게 작게 붙인 덩어리들을 크게 붙이는 방식으로 진행된다.

• 이때 작게 쪼갠 컴포넌트를 atom이라고 한다. atom의 경우 기본적인 태그들을 뜻하며 이들의 경우에는 가장 기본이 되는 컴포넌트이다.
• 이렇게 작게 쪼갠 atom들을 합친 컴포넌트가 molecules라고 한다. molecules의 경우 기본적인 태그들을 합친 field들을 의미한다.
• 이렇게 작게 합친 molecules를 합친 컴포넌트가 organisms라고 한다. organisms의 경우에는 molecules들에 데이터와 관련된 로직을 합쳐서 전체적인 정적인 웹을 동적인 웹으로 바꿔주는 역할을 한다.
• 이렇게 합친 organisms를 합친 컴포넌트가 templates라고 한다. templates의 경우에는 organisms를 합쳐서 전체적인 레이아웃을 잡는데 큰 역할을 담당한다. 
• 이렇게 합친 templates는 결국에는 pages에 모이게 된다.

이런 구조로 이루어진 atomic pattern의 장점은 각 컴포넌트의 역할이 명확하다는 점과 각 폴더구조가 명확하게 나눠져있다는 점이다. 이뿐만 아니라 컴포넌트를 상세하게 나누다보니 리엑트의 렌더링을 최적화 시킬 수 있다는 장점도 존재한다. 또한 재사용을 할 수 있는 컴포넌트들을 갯수가 많아질 수 있다는 장점이 있다.

하지만 이렇게 컴포넌트를 상세하게 나누다보니 컴포넌트의 규모가 커지면 원하는 컴포넌트를 찾기 힘들다는 점이 단점이다. 이뿐만 아니라 organisms ->molecules -> atom으로의 props drilling이 이러난 다는 점이 단점이다.