UI 공통 컴포넌트 다시 생각해보기

  • 기술 면접 때, 공통 컴포넌트 개발과 관리에 대해 질문을 받았다.
  • 당시 비용 관련해서 부정적인 측면만 말했는데, 정리를 안하고 말해서 좀 아쉬웠다.
  • 그래서 다시 장단점을 정리해 보고, 만약 개발을 하게 된다면 이런 식으로 하면 좋을 것 같다고 계획을 세워봤다.

내가 생각하는 UI 공통 컴포넌트 장단점

  • 장점
    • 재사용 가능
      • 하나의 컴포넌트가 여러 군데 사용됨
      • 변경사항이 있어도 컴포넌트 하나만 고치면 된다.
  • 단점
    • 비용
      • 컴포넌트의 공통 요소를 찾고 추출한 후 새로운 컴포넌트를 만들어야 한다.
        • 장기적으론 장점이 될 수도 있지만…
      • 잘 만들어야 한다.
        • 잘 만들어야 자주 사용한다.
      • 계속 관리도 해줘야 한다.
        • 공통인 만큼 나만 쓰는게 아니다.
        • 변경이나 추가 사항이 있으면, 팀원들과 협의를 거쳐야 한다.

새롭게 UI 공통 컴포넌트 개발한다면

  • 공통 컴포넌트를 베이직과 컴플렉스로 나누자.
    • 베이직은 말 그대로 기본 컴포넌트
      • 버튼, 모달, 폼 등
      • react-bootstrap 이나 matrial-ui의 컴포넌트를 참조해서 진행할 수 있을 것 같다.
    • 컴플렉스
      • 특정 정보에 맞게 여러 요소들이 조합되고 커스터마이징 된 컴포넌트: 테이블, 리스트, 차트, 확인창 등.
      • 이 컴포넌트는 유연하지 않고, 특정 경우에만 제대로 동작하도록 만든다.
  • 변경 사항이 있을 경우: 관리 측면
    • 베이직 컴포넌트의 경우 유연하게 만들어야 하므로 팀원들끼리 조율이 필요한 것 같다.
      • state, props, event handler 등 합의를 거쳐서 기능을 변경하거나 추가하자.
    • 컴플렉스 컴포넌트 경우, 변경 사항에 맞추자.
      • 변경을 거듭하다가 공통 요소가 더이상 보이지 않을 경우 과감히 빼버리자.
    • 테스트는 꼼꼼히 하자.
    • 비용은 감수하자.

시간이 제한되어 있다면, 컴플렉스 컴포넌트만 관리하는 게 나을 것 같다.