Custom Hook

개요

여러 기능이 1개의 컴포넌트에 쌓이면서 관심사에 따라 각각의 로직을 분리하기 위한 기능이다. 대표적으로 데이터를 Fetch해오는 useFetch hook과 scroll할 때 fadeIn하는 animation을 주는 hook등이 존재할 수 있겠다.

Goal: 관심사의 분리! 함수의 로직, 관련성 등에 따라 code splitting을 하는 것이 최종 목표이다!

useFetch Example

import { useState, useEffect } from 'react';

const useFetch = url => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState([]);

  const fetchData = (fetchUrl = url) => {
    fetch(fetchUrl)
      .then(res => res.json())
      .then(fetchedData => {
        setIsLoading(true);
        setData(fetchedData.result);
      })
      .catch(err => setError(err))
      .finally(() => setIsLoading(false));
  };

  useEffect(() => {
    fetchData();
    hooks/exhaustive-deps
  }, []);

  return { data, isLoading, error, fetchData };
};

export default useFetch;

useFetch Usage + Causion

1개의 컴포넌트에 대해 여러번의 useFetch를 불러와 사용할 수 있다. state도 여러개 관리할 수 있다는 점에서 어찌보면 당연한 이야기지만 초기의 개념이 잡혀 있지 않았을 때는 무조건 1번만 써야 되는 건줄 알았다.
fetch가 useFetch라는 함수 내에서 useEffect에서 시행되기에 불러와 사용하는 컴포넌트에서는 useEffect를 또 사용할 필요가 없다! data자체가 이미 useEffect가 적용된 상태이며 loading = true -> fetched Data -> loading = false의 순서를 거친다.
같은 함수를 여러 컴포넌트에서 가져와 사용하기 때문에 useFetch의 상태를 공유한다고 착각할 수 있다!! usefetch는 함수! closure를 쓰지 않았고 state로 Fetched data를 관리하기 때문에 사용되는 컴포넌트 마다 data를 가져오기에 상태는 공유되지 않음에 주의!!