어떻게 재사용을 이용한 컴포넌트를 만들수 있을까? #640
Replies: 1 comment
-
|
저는 이번에 Compound Component패턴(합성 컴포넌트)을 도입하는게 어떨까라고 생각됩니다. Compound Component 패턴이란 관련된 것끼리 묶어서 유연한 ui를 개발할수 있을것 같습니다!
<ArticleItem.Title />
<ArticleItem.Content />
<ArticleItem.Likes />
<ArticleItem.Comment />
<ArticleItem.CreatedAt />
...현재 ArticleItem이라고 크게 하나를 묶어서 사용해서 재사용을 할수 없는데 이런식으로 각각의 역할을 분리한다면 2개를 같은 컴포넌트들을 이용해서 구현할수 있을것같습니다! 장점장점으로는 같은 도메인끼리 모아놓아서 공통된 상태에 대해서는 부모에서 받고 각각 필요한 props만 받기에 현재 props를 6,7개씩 받는 컴포넌트들을 깔끔하게 나눌수 있고 관심사의 분리로 재사용성이 좋아집니다! 하나로 묶어서 모든걸 관리한다면 컴포넌트 자체를 보고 어떤 동작을 하는지 알수가 없습니다. Compound Component를 이용하면 안에 어떤것이 포함되는지 알 수 있어서 동작을 파악하기 수월합니다. 단점jsx코드가 길어집니다. 한줄로 작성할것을 6,7줄을 작성하여 구현하게 됩니다. 개인적인 견해저는 단점에 비해서는 장점이 훨씬 크다고 생각되며 jsx가 길어지는 것은 함수 네이밍이 길어지는 것과 비슷하다고 생각합니다. 함수 이름이 아무리 길더라도 가독성을 위해 길게 쓰는게 더 좋다고 하는데 컴포넌트도 동일한것 같습니다. 참고자료https://itchallenger.tistory.com/266 |
Beta Was this translation helpful? Give feedback.
-
현재 articleItem을 보면 비슷한 ui임에도 불가하고 완전히 다른 컴포넌트로 이용하고 있습니다. 어떻게 재사용을 챙길수 있을까요??
Beta Was this translation helpful? Give feedback.
All reactions