React : Custom Hook

Custom Hook

※ 사용하는 이유
- 재사용이 가능한 로직을 별도의 함수로 만들어 다른 컴포넌트에서도 사용 가능하게 할 수 있다.
- React에서 제공하는 built-in-hook과 동일하게 use로 시작하는 네이밍 컨벤션을 따른다.

※ 예시

- App.js

  const [tasks, setTasks] = useState([]);

  const transformTasks = (tasksObj) => {
    const loadedTasks = [];

    for (const taskKey in tasksObj) {
      loadedTasks.push({ id: taskKey, text: tasksObj[taskKey].text });
    }

    setTasks(loadedTasks);
  };

  const { isLoading, error, sendRequest: fetchTasks } = useHttp();

  useEffect(() => {
    fetchTasks(
      {
        url: "https://test-9ba2f-default-rtdb.firebaseio.com/tasks.json",
      },
      transformTasks
    );
  }, []);​

- useHttp.jsx (Custom Hook)

import { useState } from "react";

export default function useHttp() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const sendRequest = async (requestConfig, applyData) => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch(requestConfig.url, {
        method: requestConfig?.method ? requestConfig.method : "GET",
        headers: requestConfig?.headers ? requestConfig.headers : {},
        body: requestConfig?.body ? requestConfig.body : null,
      });

      if (!response.ok) {
        throw new Error("Request failed!");
      }

      const data = await response.json();
      applyData(data);
    } catch (err) {
      setError(err.message || "Something went wrong!");
    }
    setIsLoading(false);
  };

  return {
    isLoading,
    error,
    sendRequest,
  };
}