아토믹 디자인 (Atomic Design)

❓ Atomic Design이란?
웹 프론트 개발 프레임워크, 라이브러리인 Angular, Vue, React는 컴포넌트 단위로 개발을 진행한다.
이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다. 따라서 아토믹 디자인이 컴포넌트 중심 설계 패턴에서 더욱 주목받게 되었다.

아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로  효과적인 인터페이스 시스템을 만든다.

👍 장점

컴포넌트를 작은 단위로 나누어 재사용성을 높여줌
코드 중복을 줄임
일관된 스타일과 기능 제공
수정이 필요할 경우 쪼개진 컴포넌트 단위로 유지보수가 용이

👎 단점

패턴이 익숙하지 않은 경우 개념 이해가 어려움
과도한 분리로 인해 코드가 복잡해질 수 있음
규모가 클 경우, 처음부터 끝까지 이 방법을 적용하는데에 있어 복잡한 구조를 초례할 수 있음

기본 컴포넌트 설계

1. ProfileImg.tsx
2. ChatContent.tsx
3. ReactionEmoji.tsx

이러한 구조를 이용한 설계를 하였습니다. Chat안의 3가지 요소를 molecules로 분류를 하였고, 이 세 요소를 합친 Chat은 Organism으로 보았습니다.