면접 때도 그렇고, 프로젝트를 할 때도 그렇고 스스로에게 던지는 좋은 커스텀 훅이란 무엇인가에 대한 질문을 던지면 뚜렷한 답이 나오지 않는다.
실제로도 커스텀 훅에 대해서 고민해보고, 관련한 방법들을 찾아보자니 정말 각양각색의 커스텀 훅 방식들이 보였다.
이 글을 쓰게 된 이유는 마이그레이션 전후로 이 커스텀 훅의 작성 방향에 대한 고민이 많았다. 물론, 앞으로도 이 부분에 관한 생각을 안 할 수 없을 거라서 차라리 이참에 Custom Hook 패턴에 대해서 그 동안 써왔던 방식을 되돌아보고 이걸 한 번쯤은 정리해보면 좋겠다 싶어서 쓰게 되었다.
커스텀 훅과 관련한 아티클이나 블로그, 그리고 실제로 보거나 써본 커스텀 훅들은 아래와 같았다.
페이지나 컴포넌트와 관련한 동작, 핸들링 등의 로직을 전부 반영한 경우
첫 회사가 이 방식을 쓰고 있었다.
모든 로직을 전부 각 페이지와 연관된 커스텀 훅으로 만들어서 관리하고 있었고, 나 역시 이 방식에 익숙해지고 다양한 커스텀 훅을 접하지 못해서 이 방식을 이용하고 있었다.
오로지 React와 관련한 Hook 함수만을 포함해 페이지와 컴포넌트에서만 쓰이는 경우
이 방식은 현재 프로젝트 마이그레이션 이후에 사용하고 있는데, 상단의 방식에서 핸들링과 관련한 내용은 기존 컴포넌트로 유지를 하고 오로지 react hook을 가져와 쓰는 부분을 커스텀 훅으로 만들었다.
컴포넌트와 페이지와는 상관 없이 오로지 공용으로, 반복적으로 쓸 수 있도록 만든 경우 등
대다수의 회사에서는 이 경우를 커스텀 훅으로 보는 것 같았다.
실제로도 많은 블로그에서도 이 내용을 언급하는 경우도 많았고, 이게 정론이라고 생각도 한다.
이렇게 말하면 결국 세 번째가 정답이지 않느냐, 왜 이런 글을 쓰는 것이냐고 할 수 있는데 이번 프로젝트 마이그레이션에서 첫 번째에서 두 번째로 옮긴 과정, 그리고 세 번째를 선택하지 않은 이유를 작성해보고자 한다.
기존에 사용한 방식, 첫 번째로 사용했다는 방식은 하나의 페이지나 컴포넌트에 하나의 커스텀 훅이 의존되는 형태였다.
코드로 직접 보는게 빠르니 아래의 코드를 보자.
export default function SelectTravelSection() {
const { updateTravelTypeAndMoveToNextStep, backToMainPage } =
useSelectTravelSection();
return (
<StSelectTravelSection.Section>
<Description
title={`새로운 여행을\\n준비하시는군요!\\n\\n이번엔 어디로 떠니시나요?`}
color={colors.white}
/>
<StSelectTravelSection.ButtonBox>
<Button
type="button"
text="해외 여행"
colorType="primary-reverse"
onClick={() => updateTravelTypeAndMoveToNextStep("foreign")}
/>
<Button
type="button"
text="국내 여행"
colorType="secondary-reverse"
onClick={() => updateTravelTypeAndMoveToNextStep("domestic")}
/>
<Button
type="button"
text="돌아가기"
colorType="invalid"
onClick={() => backToMainPage()}
/>
</StSelectTravelSection.ButtonBox>
</StSelectTravelSection.Section>
);
}