react/stop-using-atomic-design/
utterances-bot opened this issue · 5 comments
Stop Using Atomic Design Pattern | JBEE.io
요즘 많은 프런트엔드 팀에서 디자인 시스템을 운영하는 것 같다. 그러면서 함께 들리는 용어 중 하나는 바로 Atomic Design Pattern…
좋은 글 감사합니다.
잘 읽었습니다. 다음 글이 기대되네요.
좋은 글 감사합니다
재사용성을 고민하면서 아토믹 디자인 패턴을 자주 사용했고 늘 고민중입니다. 답이 정해지지 않아서 늘 스스로 규칙을 정해보곤했는데요
(비순수 컴포넌트)
Page는 데이터 api등을 호출하여 외부 도메인 컨텍스트가 직접적으로 불리는 부분(사용자 정보 페이지, 주소 정보 페이지 등)
Template은 특정 도메인 컨텍스트와 무관하게 데이터가 들어올 수 있는 부분(정보 표출 템플릿 등, 한 페이지에 여러개의 템플릿이 들어갈 수 있고 그 템플릿마다 도메인이 달라질 수 있음)
(순수 컴포넌트)
Atom: 더이상 나눌 수 없는 요소(가장 명확한것은 태그 단위 컴포넌트: li, button 등)
Molecule: 위 원자 2개 이상의 조합 (합성 사용 시 원자 1개 이상을 기대 할 경우)
Orginism: 위 원자 및 분자 2개 이상의 조합(합성 사용 시 원자 및 분자를 기대할 경우)
위와 같이 구분하고 순수한 ui 컴포넌트를 잘 정리하여
디자인시스템을 만든다고하면 아토믹 디자인이 유용하게 쓰일 수 있지않을까 싶습니다
bootstrap, materialUi같이 정리된 프레임워크들을 wrapping하여 bi/ci를 적용한 ui 컴포넌트를 npm등에 배포하고 사용하는 방식으로요
원자 분자 유기체의 구분이 모호한것은 알고 있습니다
주관적인 생각이지만 아토믹 디자인 패턴은 presentational, container 이분화 하던것을 조금 더 상세히 구분한것이 아닐까하는 생각도 있습니다
혹자는 atomic design패턴의 props drilling같은 이슈를 회피하기 위해 데이터 컨텍스트와 결합되는 책임을 담당하는 wrapped component(?)를 사용한다고도 합니다
그래서 쓰지말자 보단… 잘 써보자라는 느낌으로 접근해보는게 어떨까 싶습니다 ㅠㅠ
나중에 작성하신 유연한 컴포넌트를 읽으며
리액트에서의 추상화개념을 좀 더 심도있게 생각해볼 수 있게돼서 너무 감동받았습니다
자주 찾아오겠습니다 감사합니다!
그래서 쓰지말자 보단… 잘 써보자라는 느낌으로 접근해보는게 어떨까 싶습니다 ㅠㅠ
제목이 Stop Using~이지만 결론은 쓰지말자라기 보단 트레이드 오프를 잘 계산하자. 여서요, 말씀해주신대로 잘 사용하는 것이 중요하다고 생각합니다. 댓글 감사합니다 :)
잘 읽었습니다 감사합니다!