리액트 컴포넌트 설계시 패턴화에 대한 고민

Question

안녕하세요. 저는 퍼플리셔이며 현재 사내 Next.js 어드민 프로젝트를 진행하고 있습니다.React로 토이프로젝트만 조금 진행해봤었는데, 갑자기 실무에 투입되었습니다.. 현재 검색 UI의 컴포넌트 구조에 대해 고민하고 있습니다.자주 사용되는 패턴(필터, 버튼, 인풋)을 구조화한 후 1차적으로 아래와 같이 구성했습니다. }>

몰랑토끼 · Answer

react의 컴포넌트는 기존 퍼블때의 지식을 다 버려야 컴포넌트 구성이 쉽습니다. ui에만 집중하면 되서 초기화 와 검색이라는 기능을 벗어버리고 버튼 의 ui만 신경쓰면됩니다.

포크코딩 · Answer

매우 정석적인 구조입니다. 이벤트 로직도 리액트 훅을 사용한다면 커스텀 훅으로 분리해서 따로 쓰는게 좋습니다.<FunctionGroup />을 통째로 코드에 쓰는 것보다, 외부 로직 주입을 위해 render 패턴을 사용하시는 것을 추천드립니다.

Iswn · Answer

고민이 많으시겠네요.SearchBasic과 같은 복합 컴포넌트의 재사용과 맞춤형의 절충안을 찾는건 매번 어려운 일이죠 현재구조라면 actions와 기본 버튼들간의 둘 중 하나만을 선택해야하는데현실은 리셋은 사용하지 않으면서 조회는 그대로 사용하면서 추가 버튼을 넣고 싶을 수 있습니다.이 경우를 대비한다면 SearchBasic({hiddenButtons, hiddenSubmit, hiddenReset}) 프로퍼티를 이용해서 커스텀을 제공해도 좋을 것같습니다.이정도면 Basic이라는 역할을 가진 컴포넌트는 충분히 할일을 한것 같네요그 이상의 커스텀은 SearchBasic을 벗어나는 것이므로 SearchSpecial 같은 얘가 나와도되구여SearchBasic, SearchCustom같은 선택지를 두어도 좋을 것 같습니다.

몰랑토끼 · Answer

규모가 큰 곳일수록 디자인시스템 위주로 굴러가게 됩니다. 결국 실제로 스토리북처럼 실제로 npm으로 내부내져서 쓰인다는말이죠. 컴포넌트를 만들었을때 사용하는 입장에서 어떻게 하면 편하게 사용할수있는지를 생각해보세요. 컴포넌트를 사용할때마다 커스텀훅을 새로 만들어야 하면 그 컴포넌트 자체로 사용할수없고, 커스텀훅이 필요하다면 컴포넌트 내부에 정의가 되어있어야 합니다. 예를 들어 드롭다운 같은건 드롭다운이 열려있으면 드롭다운을 제외한 영역을 클릭하면 드롭다운이 닫혀야 하는데, 이 닫히는 기능은 드롭다운 컴포넌트 내부에 정의되어 있으니 드롭다운을 사용할때 커스텀훅을 만들필요가 없고, (드롭다운을 사용할때마다 외부닫힘기능을 만들어야 한다면 잘못된 컴포넌트)모달을 만들었을때 열리고 닫히는 기능의 커스텀훅이 필요하다면 이것도 잘못된 컴포넌트이죠. 한 컴포넌트가 있고, 그 안에 종속된 자식 컴포넌트같은 개념을 사용한다면 합성컴포넌트 개념도 괜찮은 방법입니다.

리액트 컴포넌트 설계시 패턴화에 대한 고민

4개의 답변

Q&A 목록