Custom Hooks

Custom Hooks

• 개발자가 직접 만든 hook을 의미한다.

• 일반 함수와의 차이점은, 함수 내부에서 useState, useEffect등과 같은 hook을 사용하는 함수이다.

• 같은 함수인데, 이름만 custom hook으로 부르는 것이다!
  💡Why?
  hook은 일반적인 함수와 다르게 작동하기 때문이다.
  ex) useEffect는 의존성 배열에 의해 다시 실행되는 경우가 있음

• 클래스형 컴포넌트만 있을 때는 함수 안에서 함수를 호출하는 것이 불가능해서 HOC를 사용해야 했다.
  함수형 컴포넌트에서는 custom hook 사용이 가능해 간편해졌다.

이를 활용해 container/presenter 패턴에서 container를 없앨 수 있다.

• container의 함수들을 Custom Hooks로 만들어서 import 받아서 사용만 하면 되기 때문에 container의 로직을 없앨 수 있다!

1. 페이지 이동 Custom Hook

1-1. Custom Hook 만들기

export function useMoveToPage() {
  const router = useRouter();
  const [visitedPage, setVisitedPage] = useRecoilState(visitedPageState);

  const onClickMoveToPage = (path: string) => () => {
    /* 현재 경로 저장 */
    // 뒤로가기 등 필요할 때 사용
    // 로그인/회원가입 페이지 등은 저장되지 않도록 분기 필요
    setVisitedPage(path);
    void router.push(path);
  };

  return {
    visitedPage,
    onClickMoveToPage,
  };
}

1-2. Custom Hook 사용하기

import { useMoveToPage } from "../../src/components/commons/hooks/useMoveToPage";

export default function CustomHooksUseMoveToPage() {
  const { onClickMoveToPage } = useMoveToPage();

  return (
    <div>
      <button onClick={onClickMoveToPage("/board")}>게시판으로 이동</button>
      <button onClick={onClickMoveToPage("/market")}>마켓으로 이동</button>
      <button onClick={onClickMoveToPage("/myPage")}>마이페이지로 이동</button>
    </div>
  );
}

2. useQuery Custom Hook

2-1. Custom Hook 만들기

import { gql, useQuery } from "@apollo/client";
import {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../../commons/types/generated/types";

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int, $search: String) {
    fetchBoards(page: $page, search: $search) {
      _id
      writer
      title
      createdAt
    }
  }
`;

export const useQueryFetchBoards = (variables?: IQueryFetchBoardsArgs) => {
  const query = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
    FETCH_BOARDS,
    { variables }
  );
  return query;
};

2-2. Custom Hook 사용하기

  const { data, refetch } = useQueryFetchBoards({ page: 1 });