Hook 이란?
Hook은 함수 컴포넌트에서 상태 관리와 다양한 기능을 활용할 수 있도록 도와주는 함수입니다.
이전에는 클래스 컴포넌트에서만 상태 관리와 라이프사이클 기능을 사용할 수 있었지만, 함수 컴포넌트에서도 훅을 사용함으로써 더 간결하고 유연한 코드 작성이 가능해졌습니다.
Hook의 원칙
1. 최상위 레벨에서만 호출하기
Hook은 반드시 함수 컴포넌트의 최상위 레벨에서만 호출되어야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 예상치 못한 동작이 발생할 수 있습니다.
2. 함수 컴포넌트 내에서만 사용하기
Hook은 함수 컴포넌트 내에서만 사용되어야 합니다. 클래스 컴포넌트나 일반 JavaScript 함수 내에서는 사용하지 말아야 합니다.
3. 조건문에서 Hook 사용 피하기
조건문 내에서 Hook을 사용하는 것은 피해야 합니다. 대신 조건문 밖에서 Hook을 사용하고, 조건문에서 상태나 데이터를 사용하는 방식으로 코드를 구성하는 것이 좋습니다.
4. 커스텀 훅 네이밍 규칙
커스텀 훅을 만들 때는 반드시 "use" 접두사로 시작해야 합니다. 예를 들어, useFetchData나 useLocalStorage와 같이 이름을 지정하는 것이 좋습니다. 이렇게 함으로써 개발자들은 이 함수가 훅으로서의 역할을 수행한다는 것을 쉽게 알 수 있습니다.
5. useState, useEffect 등의 순서 유지하기
컴포넌트 내에서 여러 개의 Hook을 사용할 때, 항상 동일한 순서로 사용해야 합니다. 예를 들어, 컴포넌트 내에서 useState 후에 useEffect를 사용하고, 순서를 바꾸지 않도록 해야 합니다.
6. 많은 훅을 분리하기
너무 많은 로직이 한 컴포넌트에 들어가면 코드를 이해하기 어려워질 수 있습니다. 관련된 로직을 여러 개의 커스텀 훅으로 분리하여 재사용성을 높이는 것이 좋습니다.
Custom Hook
특정 상태관리나 라이프사이클 로직들을 추상화하여 묶어서 재사용이 가능하도록 제작이 가능한 함수를 뜻합니다.
[작성한 커스텀 훅]
//useEventQuery.ts
import { useQuery } from "react-query";
import { allList, myList } from "../lib/api/eventApi";
export function useEventQuery(key: string) {
return useQuery(key === "events" ? "events" : "myevents", key === "events" ? allList : myList);
}
[캘린더 컴포넌트에 커스텀 훅 적용하기]
//calendar.tsx
import { useEventQuery } from "../hooks/useEventQuery";
const Calendar = () => {
// ...
const { data: allEvents, isLoading: allEventsLoading } = useEventQuery("events");
const { data: myEvents, isLoading: myEventsLoading } = useEventQuery("myevents");
// ...
}사용한 이유: 이벤트 데이터를 가져오는 로직을 여러 곳에서 중복해서 작성할 필요가 없었고, 같은 데이터를 가져오는 로직이 다른 컴포넌트에서 필요할 때 재사용함으로써 코드를 더 간결하게 유지하기 위함이었습니다.
Hook의 원칙을 모르는 상태에서 useState, useEffect에서 오류가 나면 이해를 못했었는데 외우듯이 쓰고있던 나자신에게 반성했고 많이 공부하게 되었다.
완벽히 숙지하면서 쓰지 않았지만 사용방식을 익히는 데에 까다롭고 응용하려면 나름의 노하우들이 필요하다.
좋은 훅을 보면서 연구하는 습관을 들이고, 여러 프로젝트에 적용하면서 익숙해지도록 노력해야겠다.
