https://fe-developers.kakaoent.com/2023/230330-frontend-solid/
Single responsibility principle
단일 책무 원칙 : 고객 또는 조직의 부서(디자인팀, QA팀 등등)의 요구 사항의 범위와 최대한 동일하게 컴포넌트를 설정하자.
이렇게 하면 요구사항을 반영해서 수정하는 것도 편리하고, 사이드 이펙트도 최소화된다.
이런 방식의 컴포넌트를 설계할 때, 정보구조도(IA)를 그려놓으면 편하다. (보통 기획(UX) 담당이 함)
IA에서 사용한 단위와 네이밍을 최대한 그대로 쓰는게 좋다. 만약 네이밍이 모호한 부분이 있으면 기획(UX) 담당에게 수정을 요청하자.
이 후 기획팀에서 상세 기획서를 작성해 줌(와이어프레임이랑 똑같은 듯..?).
이걸 그대로 컴포넌트 설계도로 활용해도 무방함
아토믹 디자인
SRP 원칙을 따르기 쉽게 만들어주는 컴포넌트 설계 기법
여기 잘 정리 돼있음
아토믹 디자인 : molecule과 organism의 구분
molecule : atom을 조합해 만든, SRP를 충족하는 단위(ex form, 체크박스 등)
organism : atom과 molecule을 조합해 만든 단위(ex 배너, 카드 리스트 등)
molecule은 컨텍스트(문맥)없이 단순 UI적인 요소가 강할 때, organism은 공지사항, 배너, 카드 리스트와 같이 컨텍스트를 갖고 있을 때.
molecule은 네이밍도 UI적인 느낌이 강하고, organism은 네이밍에 컨텍스트가 포함됨
그래도 모호하면 일단 organism으로 짜고 추후 논의
아토믹 디자인 : organism의 레이아웃이 페이지 별로 조금씩 다를 때
compound components 설계로 좀 더 작게 나눠서 구현하는 것도 방법
아토믹 디자인 : 재사용성과 props
재사용성을 높이기 위해, 아토믹 컴포넌트에서 패딩이나 마진같은 스타일링 값을 정의해두지 말고, 실제로 컴포넌트를 호출해서 사용하는 곳에서 props로 값을 넘겨 사용하는 식으로 구축하자.
아토믹 디자인의 단점
props를 상위 컴포넌트에서 하위로 주고 주고 주고... props drilling이 있어서 추후 state 자료형이라던지 변경 사항이 생기면 이 구조를 따라가며 다 바꿔줘야돼서 불편
그래서 https://itam.tistory.com/91 요 링크처럼 하는 것도 괜찮은 듯
