좋은 컴포넌트 만들기!

Question

안녕하세요! 프론트엔드 병아리 개발자입니다! 컴포넌트에 대한 몇가지 노하우를 얻고싶어 용기내어 질문 드립니다.

요즘 좋은 컴포넌트란 어떤 것일까에 대해 많이 고민하고, 나름의 기준을 잡고자 열심히 공부도 하고 컴포넌트 연습장도 만들어서 리팩토링을 계속 해나가는 중인데요. 코드가 늘 100% 완벽할 수는 없겠지만 이런 부분에 있어서 많이 공부하고 고민을 하고 코드를 작성하면 그래도 더 좋을 것 같다는 생각이 듭니다.

그래서 질문드립니다..! 저는 최근까지는 뷰와 로직의 분리, 가독성, 불필요한 렌더링을 줄이는 것, 재사용성 등 여러가지를 고려하면서 좋은 컴포넌트에 대한 기준점을 잡고자 노력하고 있었는데요, 이 부분에 대해 다른 분들은 어떤 기준점을 갖고 계시는지, 노하우가 있으신지 궁금합니다. 컴포넌트 작성에 대한 부분이나 커스텀 훅을 만들고 나누는 방법 같은 것들이요! 아니면 참고할만한 키워드만 주셔도 열심히 공부해보겠습니다! 질문이 너무 추상적인 것 같지만.. 혹시 공유해주실 분 계신가요? 🥲

! 정다송 · Accepted Answer

안녕하세요.
백엔드 개발자이지만, 최근 vue3 프론트 개발에도 같이 참여한 적이 있어서, 컴포넌트에 대한 개인적인 의견을 남겨 봅니다.
컴포넌트는 재사용을 할 수 있는 가장 큰 장점을 가지고 있다고 생각하고, 소스 관리적인면에서 정말 좋은 리팩토링이라고 생각합니다. 좋은 컴포넌트는 디자인에 맞게 잘 구조화된 컴포넌트라고 말할 수 있을 것 같아요. 회사 업무를 진행하다보면, 와이어프레임이 나오고 상세 디자인이 나올텐데, 전체적인 프로덕트 디자인에 대해 검토하면서 컴포넌트 설계를 진행할 거에요. 이 때, 유지보수와 재사용성, 확장성을 고려해서 설계가 들어갈텐데, 실제로 개인마다 기준이 다르긴 한 것 같아요. 제 기준으로는 심플하게 다른 사람이 가져가서 사용할 수 있고, 디자인적으로 무언가 변경이 되어도 쉽게 유지보수 할 수 있으면 되지 않을까 생각합니다. 노하우라기 보다는 경험을 통해 얻은 기준으로 이해해 주시면 좋을 것 같아요.
글 작성하신 분께서도 앞으로의 경험을 통해, 본인만의 기준을 만들어 가시면 좋을 것 같습니다 ~