“ 컴포넌트의 파편화 ”
“ 명확한 컴포넌트 설계 기준 미비 ”
컴포넌트 구조 설계 시 명확한 기준 ❌
제각각인 규칙 → 관심사가 너무 많거나 재사용 & 확장할 수 없는 컴포넌트 발생
💡 **가장 작은 컴포넌트 단위**를 원자로 설정하고 이를 바탕으로 **상위 컴포넌트**를 만들어 **코드 재사용을 최대화**하는 방법론원자(Atoms)
디자인과 기능의 최소 단위
ex) Label, Text, Container, Button, Icon …
분자(Molecules)
원자보다 한 단계 위의 컴포넌트
ex) Input forms, Navigation, Card…
유기체(Organisms)
분자를 묶어 관리하는 컴포넌트
ex) 입력 폼과 헤더 감싸기, 여러 카드를 관리하는 그리드…
*그리드: 레이아웃을 정렬하고 구성하기 위한 중요한 도구
템플릿(Templetes)
여러 유기체가 모여있고 페이지보다는 낮은 단위
컴포넌트 간 의존성과 복잡도가 까다로울 수 있음
👉🏻 ex) 디자인 팀에서 헤더 중 일부를 변경해 앵커로 동작되도록 해달라고 할 때..
① 헤더 컴포넌트에 props 등을 추가로 넣어 앵커 기능도 가능하도록
② 앵커가 포함된 컴포넌트 새로 만들기
이런 요청이 계속 발생한다면 😟
아토믹 디자인에서 원자에 해당하는 컴포넌트가 파편화되고 난잡해지는 결과
➡️ 많은 원자 컴포넌트가 각각 어떤 기능을 하는지 명확히 구분하기 어려워짐
*앵커: 특정 영역으로 스크롤 이동
이런 문제들을 없애려면❓
📌 원자 단위 보수적으로 관리 ⚙️ 이벤트 핸들링에 대해선 수동적으로 관리 👊🏻 입력 필드와 같이 **데이터를 처리하는 값에 대해선 분자 수준의 컴포넌트에서 관리하기**