컴포넌트(hook) 설계 방법이 궁금합니다

Question

물론 항상 케이스마다 다르겠지만, 일반적으로component 혹은 hook으로 분리하는 기준이 있을까요?

대략 비슷한 ui나 로직 등을 직관적으로 분리하고 있는데, 좋은 기준이 있을지 궁금합니다.

컴포넌트는 작은 단위로 나누면 좋은 것 같기도 한데, hook같은 경우는 깊이가 깊어지면 state 변경 추적도 어려워 함수처럼 설계하기 어려운 것 같습니다.

성원 · Answer

컴포넌트와 훅은 기능상 비슷하게 사용할 수 있어서 저도 많이 고민하는 부분입니다.

예를들어 kakao 공유하기를 구현할 때 컴포넌트안에 비즈니스 로직을 넣어서 <KaKaoShare/>와 같이 만들 수 있고 useKaKaoShare라는 훅으로도 작성할 수 있습니다.

저는 주로 
Component -> jsx element 리턴등 렌더링관련 코드
hook -> 비즈니스로직 관련 코드

이렇게 구분해서 설계합니다.
따라서 컴포넌트에 복잡한 비즈니스 로직을 두지 않고 커스텀 훅으로 분리해서 컴포넌트가 그 훅을 사용할 수 있도록 관심사를 분리하고 있어요.