개발자가 직접 만든 hook을 의미한다.
일반 함수와의 차이점은, 함수 내부에서 useState, useEffect
등과 같은 hook을 사용하는 함수이다.
같은 함수인데, 이름만 custom hook으로 부르는 것이다!
💡Why?
hook은 일반적인 함수와 다르게 작동하기 때문이다.
ex) useEffect
는 의존성 배열에 의해 다시 실행되는 경우가 있음
클래스형 컴포넌트만 있을 때는 함수 안에서 함수를 호출하는 것이 불가능해서 HOC를 사용해야 했다.
함수형 컴포넌트에서는 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,
};
}
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>
);
}
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;
};
const { data, refetch } = useQueryFetchBoards({ page: 1 });