React Atomic design patten에서 Mocules 컴포넌트 작성 방법

안녕하세요. 리액트에서 아토믹 디자인 패턴 적용 중 궁금한 점 있어 글 올립니다. 프로젝트 초기 단계이고 해당 디자인 패턴을 처음 적용시켜 봐서 mocule 컴포넌트의 구성 방식이 조금 고민됩니다. 첫번째는 molecule 컴포넌트에 하위 요소, 즉 atom 컴포넌트를 렌더링만 시켜주는 로직으로 작성했고, 두번째는 molecule 컴포넌트 내부에 atom 컴포넌트를 위치 시켰습니다. 각자 장단점이 있을거 같은데 제가 생각했을땐 첫번째 방법은 props drilling이 어느정도 완화되고, 컴포넌트 계층 구조를 한번에 파악하기 쉽고, 두번째 방법은 재사용이 용이하고 디자인 패턴의 규칙을 잘 따른 것 같습니다. 일단은 첫번째 방법은 재사용이 불가능한 컴포넌트에서 사용하고, 두번째 방법은 재사용이 가능한 컴포넌트에서 사용하자고 잠정 결론 내렸는데, 나중에 혼란스러워질 것 같다는 걱정도 듭니다. 좋은 의견 주시면 감사하겠습니다.

1// 1번
2 
3Organism.js
4<Molecule>
5 <Atom1 item={item}/>
6 <Atom2 />
7</Molecule>
8 
9Molecule.js
10<Molecule>{props.children}</Molecule>
11 
12// 2번
13 
14Organism.js
15<Molecule props={props}>
16 
17Molecule.js
18<Molecule>
19 <Atom1 props.item={props.item}/>
20 <Atom2 />
21</Molecule>

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문