아토믹 디자인(Atomic Design)이란 것을 세션을 통해 알게 되었다.
그러므로 앞으로 적는 글들은 이제 막 아토믹 디자인에 대해 관심을 갖게 된 코린이의 글이라는 것을 유념해주시길 바랍니다.
1. 아토믹 디자인이란?
Atom:원자 로 디자인한다 라는 개발 방법 중의 하나이다.
원자로 쪼개어서 만들고, 그것들을 붙이고 합쳐서 만든다! 라는 것이다.
아마 리액트를 접해본 사람들이라면 컴포넌트를 원자라고 생각하면 이해가 된다.
리액트는 컴포넌트들을 모아서 기능을 만든다. 물론 하나의 컴포넌트에서 모든 기능을 다 구현해도
가능은 하지만, 컴포넌트의 본질적인 기능중 중요한 재사용성을 위배한다.
세상 모든 것들은 원자로 이루어져있고 그 원자가 모여 어떤 물체가 되고, 물체는 특징을 갖는다.
이 GIF가 사실 이 모든 설명의 끝이다.
각기 하나의 컴포넌트라고 가정하고 생각하면 쉽다.
labe, input, button = atoms
label + input + button = molecules
molecules + molecules = oraganisms
organizms + organizms = Templates
2. 그렇다면 왜 아토믹 디자인인가?
개인적인 의견이지만,
나는 리액트를 다루면서 컴포넌트를 나누는 정확한 기준에 대해 애매모호한 상태로
몇달을 사용해왔다.
정답이 없는 문제가 가장 어렵다고 했었던가..!
이상적인 답은 있지만
사용한지 얼마 안된 초보자 입장에서 그것을 바로 적용하기는 어려웠다.
하지만!!!
아토믹 디자인에 대해 듣고 나선 뭔가 컴포넌트에 대한 기준이 확실해 지는 것을 느꼈다.
너무나 명확하지 않은가?(나만 그럴수도..?)
사실 접한지 2일째라 아직 느낌정도만 알고 있지만
앞으로 진행할 프로젝트에 아토믹 디자인을 적용시킬 예정이다.
이 포스트는 앞으로 계속 업데이트 될 예정이며
내용은 완전 초보자가 아토믹 디자인을 적용하면서 느낀 장점과 단점 등을 업데이트 할 예정이다.
