[하루메이트] Custom Hook으로 리팩토링하기

useEnterPage

로그인이 필요한 페이지에서 사용하는 훅입니다. 다음과 같은 동작을 합니다.

1. 로그인 상태를 확인하고 로그인 상태가 아닐 경우 메인으로 보내고 로그인 모달을 켭니다. 

2. 적절하게 진입했을 경우 페이지의 스크롤을 0으로 초기화합니다.

import { useEffect } from 'react';
import useValidEnter from './useValidEnter';
import scrollToTop from '../utils/scrollToTop';

const useEnterPage = () => {
  const checkValidEnter = useValidEnter();
  useEffect(() => {
    checkValidEnter();
    scrollToTop();
  }, [checkValidEnter]);
};

export default useEnterPage;

이전에는 로그인이 필요한 페이지마다 useEffect 안에 작성해주었으나 Custom Hook으로 대체하여 반복 코드를 줄이고 코드의 재사용을 높였습니다.

//Custom Hook 구현하기 이전 코드
useEffect(() => {
    checkValidEnter();
    scrollToTop();
  }, [checkValidEnter]);
  
//Custom Hook 구현 이후
useEnterPage();