211005(화) - 커스텀 훅으로 분리

목차

• 커스텀 훅으로 분리
  • 문제의식
  • 목표
  • 기준
  • 리팩토링 진행
  • 결과

커스텀 훅으로 분리

문제의식

우리 애플리케이션의 특성상 다양한 페이지에서 서로 접근이 가능하다. 이 부분에 관해 살펴보니, myPageCommentReview, myPageLikeReview, myPageReview, reviewEditPage, reviewPage 등에서 reviewDetailPage로 이동이 가능했는데, 모두 동일한 함수를 각 페이지에서 선언 및 사용하고 있었다. 다른 페이지에서도 이와 동일한 상황이었다.

동일한 함수를 사용하고 있으므로 함수로 분리할 수 있으나, useHistory를 사용하고 있어서 커스텀 훅으로 분리할 수 있다고 생각했다.

목표

목표는 현재 사용되고 있는 모든 커스텀 훅을 사용해서 history.push()를 모두 지우는 것이다.

기준

커스텀 훅의 형태를 어떻게 만들 것인지 먼저 고민했다.

// case 1.
const { goAPage } = useMovePage(pathA);
const { goBPage } = useMovePage(pathB);

// case 2.
const {goAPage, goBPage} = useMovePage();

커스텀 훅의 형태를 case 1과 case 2로 구현할 수 있다. case 1은 path를 받아 export 한 함수를 사용하는 방법이다. 이 방법은 한 페이지에서 다른 페이지로 이동하는 함수가 여러 개인 경우, 그 개수만큼 커스텀 훅을 호출 해야 하는 단점이 있다. 두 번째 방법은 커스텀 훅 내에 모든 페이지로 이동하는 함수를 각각 만들어 그 함수들을 사용하는 방법이다. 이 방식은 case 1에 비해 커스텀 훅을 호출하는 횟수도 적고, 줄어드는 코드 라인의 수도 많아서 case 2 방식을 선택했다.

또 다른 기준으로 페이지로 이동하면서 상태를 같이 보내는 함수이다.

// case 1.
goSignupPage({
  socialProvider,
  socialId,
  socialProfilUrl
});

// case 2.
goSignupPage();

goSignUp 함수의 경우 한 번만 사용되는데, 사용하는 곳도 state를 같이 넘기고 있어서, case 2처럼 커스텀 훅에 state를 선언하고, 바깥에는 간단하게 사용하는 것이 가능하다. 하지만, state라는 특수한 정보가 커스텀 훅 안에 선언된다면 새로운 개발자가 해당 코드의 오류나 특이 사항을 발견했을 때, 커스텀 훅 코드 내부 내용까지 살펴봐야 한다는 점에서 개발자 친화적이라고 생각하지 않았다. 따라서 명시적으로 같이 넘기는 state를 나타내는 방식인 case 1을 선택했다.

리팩토링 진행

useMovePage 커스텀 훅을 만들어서 모두 적용했다. state를 반드시 넘기는 함수 goSignupPage는 &&를 사용하여 인자로 state가 잘 들어오는 경우만 동작하도록 했고, goReviewPage의 인자가 있는 경우와 없는 경우 분기를 나누어 삼항식을 사용했다.

결과

커스텀 훅으로 만들어 분리하면서, history 관련 코드 대부분이 사라져 코드량이 줄어드는 동시에 불필요하게 반복되는 함수의 반복적인 사용을 줄일 수 있었다.