개발자
리액트에서 compound component pattern과 atomic design pattern을 동시에 사용 할 수 있나요?
프로젝트 설계 단계에서 디자인 패턴에 대해 리서치 중 compound componen pattern과 atomic design pattern 두 개 다 좋아 보여 도입을 고려 중에 있는데요. 만약 두 디자인 패턴을 동시에 적용하게 된다면 아래 코드 중 FlyOut.Item은 compound component의 관점에서 FlyOut의 props이니 FlyOut이라는 폴더에 저장을 해야 할지, 아니면 다른 컴포넌트에서도 재사용이 가능하도록 atomic 폴더 안에 두고 import 해서 사용해야 하는지 고민입니다. 제가 생각했을때 다른곳에서도 재사용이 가능하면 atomic 폴더 안에, 가능하지 않다면 해당하는 organizaion 폴더 안에 두는게 좋을 것 같은데 재사용 가능한 컴포넌트를 만들기 위해 디자인 패턴을 적용하는건데 좀 모순인거 같고 안티 패턴인거 같아서요. 두 패턴을 한 프로젝트에 동시에 적용 하는게 가능할까요? 가능하다면 어떤 방향으로 설계를 해야 좋은 설계일까요?
1export default function FlyoutMenu() {
2 return (
3 <FlyOut>
4 <FlyOut.Toggle />
5 <FlyOut.List>
6 <FlyOut.Item>Edit</FlyOut.Item>
7 <FlyOut.Item>Delete</FlyOut.Item>
8 </FlyOut.List>
9 </FlyOut>
10 );
11}
12
13...
14
15function Item({ children }) {
16 return <li>{children}</li>;
17}
답변 1
인기 답변
안녕하세요 :) 두 패턴을 한 프로젝트에서 동시에 적용하는 것은 가능하더라도, 예시로 보여주신 Flyout 컴포넌트에 같이 적용하는 것은 말씀해주신 부분에서 방향을 조금 다르게 접근해보는 게 어떨까 싶어요. https://www.patterns.dev/posts/compound-pattern 컴파운드 패턴 설명에서 마침 Flyout을 예시로 들고 있어서, 답변 작성 전에 참고를 했는데요. Flyout의 경우 열렸는지, 닫혔는지 상태(state)를 관리해주어야 하는데, 이 상태는 상위 요소인 Flyout에서 관리하고 하위 요소(ex, Flyout.Item)에서는 경우에 따라 해당 상태를 전달받아 사용하게 됩니다. 컴포넌트 간 상태를 주고받기 위해 여러 방법이 있겠지만, 위 링크에서는 ContextAPI를 예시로 보여주고 있는데요. 하위요소에서 해당 Context를 사용하고 있다면, 이미 이 하위요소는 Context에 의존적이 될 것이고 그렇게되면 다른 곳에서 사용하기 힘들어지게 됩니다. (atomic 하게 사용하는 데 제약) 마치 하나의 세트처럼 컴포넌트들이 구조화되는 것이죠. Flyout.Item 자체를 Atomic하게 분리하여 사용하는 것이 아닌 Flyout.Item 내부에서 사용되는 부분을 분리시킨다면 얘기는 달라질 것 같아요. (ex, Flyout.Item의 로직을 제외한 스타일링 부분만 따로 분리) 퍼블리싱 이전, 디자인 단계에서 재사용성을 고려하여 설계를 했다면 atomic 하게 분리를 하는 것이 편하겠지만, 디자인 단계가 별도로 없는 경우에는 이 부분이 재사용이 될지 되지 않을지 판단하는 것이 어려울 수 있기 때문에 처음부터 atomic 디자인 패턴을 따라서 만들어 가는 것은 힘들 것 같아요. (이런 경우라면, 리팩토링 단계에서 진행해보시는 것은 어떨까 싶기도 합니다.)
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 09월 12일
두 디자인 패턴을 동시에 적용하는 것이 가능합니다만, 실제 구현 방식은 프로젝트의 요구사항과 개발팀의 선호도에 따라 달라질 수 있습니다. compound component pattern은 강력한 컴포넌트 조작 및 코드 재사용성을 제공하며, atomic pattern은 UI를 작고 독립적인 단위(원자)로 분리하여 관리하고 재사용하는 목적으로 사용됩니다. 두 패턴을 함께 사용하기 위해선, Atomic Design Pattern을 가장 기본 레벨에서 적용하고 이러한 원자들을 빌드업하여 Compound Component Pattern에서 사용할 수 있게 하는 방식이 일반적입니다. 즉, `FlyOut.Item` 같은 개별 컴포넌트는 `Atomic` 폴더 안에서 관리되고 재사용 가능하며, 이런 atomic components를 모아 `FlyOut`와 같은 복합 컴포넌트를 구성하는 식으로 설계할 수 있습니다. 이런 식으로 설계한다면 `FlyOut.Item` 같이 특정 컴포넌트에 종속되지 않으면서도 필요할 때는 compound component의 일부로 활용할 수 있는 유연함을 얻게 됩니다. 그러나, 중요한 것은 모든 설정이 프로젝트의 요구 사항에 부합하며, 개발팀이 이해하고 유지 보수할 수 있는 수준을 초과하지 않아야 한다는 점입니다. 디자인 패턴은 도구일 뿐, 모든 상황에 일률적으로 적용할 필요가 없음을 기억하세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!