우리는 지금 Container-Presenter 방식으로 폴더, 파일을 관리하고 있다.
위에 사진이 내가 만든 하나의 컴포넌트이다.
각각의 역할을 잠깐 살펴보자.
Container - State & 함수 저장 공간
Presenter - Tag
queries - 쿼리 & 뮤테이션
styles - Emotion
types - typescript
처음 썼을 때부터 매우 만족하며 지금도 잘 쓰고 있다.
얼마나 명확한가?
게다가 유지보수도 나름 쉽다고 생각한다.
그러다 문득
팀장님께서 말씀하신 Atomic 패턴이 생각났다.
그 패턴은 어떤 것일까
지금부터 googole에 ‘atomic 패턴’이라고 검색해 볼 것이다.
Atomic Pattern
자자 atomic 드가자~
atomic또한 폴더, 파일을 관리하는 방법 중 하나이다.
그런데 유독 React에서 많이 보이는 것이 atomic이다.
왜 그럴까?
React는 기본적으로 컴포넌트 단위로 구성되어 있다.
atomic도 React처럼 컴포넌트 단위로 구성하기 때문이다.
다만, 일반적으로 생각하는 React 컴포넌트 보다는 훨씬 더 작은 단위부터 시작한다.
그런 유사성이 있다보니 React에서 Atomic 패턴을 쓰는 것인가 보다보다.
그렇다면 Atomic Pattern은 어떻게 폴더, 파일을 나눌까?
Atomic Pattern 구조
위 이미지처럼 atomic 패턴은 하나의 컴포넌트 안에
atom / molecule / organism / template / page로 구성되어 있다.
오우.. 이름들이 아주 멋있다.
다음에 닉네임할 거 없으면 저거로 하자.
atom
원자라는 의미를 갖고 있다.
가장 작은 단위이다.
우리가 하나의 컴포넌트를 구성할 때 가장 작은 단위가 무엇일지 생각해 보자.
바로 아주 작은 버튼, 텍스트, Icon과 같은 것들이다.
얘네들이 atom 폴더에 들어간다.
가장 작은 단위인 만큼 재사용성이 매우 높다.
그래서 최대한 많이 재사용할 수 있도록 margin이나 위치 값을 가지고 있으면 안 된다.
또한, 다양한 state들이 적용될 수 있도록 설계 되어야 한다.
그러면 margin은 어떻게 설정하냐느? props로 전달받는 것이다.
그래야지 다양한 페이지에서 props만 다르게 넘겨주면 margin이 자유로워진다.
그런데 이렇게까지 해야 하나??
사용 예시를 보다보니 재사용성을 높이기 위해 작명도 굉장히 중요했다.
나 같으면 BoardWriteBtn이라고 이름을 지었을텐데
이렇게 지어버리면 꼭 BoardWrite에서만 사용해야 하니까..
그러면 BoardBtn 이런 식으로 Board관련된 곳에서는 사용할 수 있는 작명으로 해야 한다.
이러한 작명 문제 때문에 엄청난 고민이 있다고 한다.
molecule
분자이다.
분자는 원자들의 모임으록 구성되어 있다.
가장 많이 만드는 단위라고 한다.
입력 폼, 네비게이션, 카드 디자인 등이 여기에 속한다.
atom으로 만든 img 크기, 버튼, 텍스트 등을 조합하여 하나의 카드 디자인을 구성하는 것이다.
atom에 변하지 않는 데이터는 molecule에서 넘겨주는 것이 좋다고 한다.
분자에서 만든 Btn을 하나 예로 들면,
1
<BoardBtn Text={'안녕하세요'}></BoardBtn>
이렇게 넘기는 것이다.
위에서 BoardBtn은 하나의 컴포넌트이며, Text가 props로 넘어가는 것이다.
css에서 속성을 주는 것이랑 착각하지 말자.
Organisms
유기체라고 한다.
분자들이 모여서 만들어진 컴포넌트이다.
분자에서 하나의 카드를 만들었으면,
그 카드들이 모인 Container 혹은 Wrapper라고 할 수 있다.
유기체들은 아무래도 다양한 분자, 원자가 모여있다 보니
재사용성은 높지 않다고 한다.
여기서 분자와 원자들에게 props를 넘겨주고 위치 값도 지정해줄 수 있다고 한다.
template
유기체들이 모여 만드는 것이 템플릿이다.
여기서는 color와 같은 css 속성이 들어가지 않고
페이지에서 들어갈 정렬을 해준다고 한다.
레이아웃인 것 같다.
Header, Nav, Footer 이런 식으로.
그 안에는 Organism들이 모여있고.
그래서 Page에 넣으면 바로 사용이 가을할 수 있도록 !
page
말 그대로 하나의 완성된 페이지이다.
그렇다면 엄청많은 분자, 원자, 유기체, 템플릿이 모여있을 텐데
아직 한 번도 해보지 않는 나로써는
과연 State를 어떻게 관리할 것인가가 의문이다.
돌아보는 Atomic Pattern
내 기준, 컴포넌트를 재활용하는 것은 디자인에 따라 달려있다고 생각한다.
같은 기능의 버튼이라도 너무 다른 디자인이면 결국 새로 만드는 것이 훨 낫기 때문이다.
그렇다면 디자인 단계 때부터 디자이너가 재사용성을 이해하거나
개발자가 같이 디자인 기획 단계에 들어가야 하는 것 같다.
실제로 검색해보니 그런 경우가 필요했고,
그러다보니 아직 많이 쓰이는 패턴이 아니라고 한다.
어떤 것을 재사용하고, 어떤 것을 atom, molecule에 넣을지는 온전히 개발자의 몫에 달려있다.
그러다보니 각자 같은 페이지를 만들더라도 생각하는 단위가 다를 것이다.
그러면 어느 정도 경험이 있는 사람들이 컴포넌트 단위의 이해도가 높아야지 협업이 가능할 것 같다.
Component-Presenter 방식으로 하던 나는
실제로 재사용을 하는 경우는 거의 없다시피 한다.
그냥 해당 presenter에서 하나 더 만들고 말지.
그리고 해당 page에서 문제가 생겼다면 분자, 원자 생각할 것 없이
presenter하나만 보면 UI디자인은 가능하다.
그러다 보니 잦은 디자인 수정이 있다고 하더라도
큰 고민없이 고칠 수 있다.
그런데 만약 atomic 패턴으로 했다면
재사용을 하던가
새로운 것을 만들던가
흠..
그러면 어떻게 props를 넘길 것인가 등 생각할 것이 너무 많아질 것 같다.
아직 써보지도 않은 내가 추측으로 이딴 판단하는 것도 웃기지만
그냥 생각나는 걸 우쨔
그래도 막상 생각해보면
똑같은 버튼 디자인에 안에 내용만 다른 것들이 많다.
그런 것들을 atom으로 만들면 계속 만들 필요가 없다는 건 좋은 것 같다.