custom hook 만들기

Category
스터디 노드 React
Status
Published
Tags
Study
Description
Published
Slug

  const [words, setWords] = useState([]);

  useEffect(() => {
    fetch(`http://localhost:3005/words?day=${day}`) //1일차 데이터만 가져오기 위해, ?day=1 형태로
      .then((res) => {
        return res.json(); //json형태로 값을 받아옴
      })
      .then((data) => {
        setWords(data);
      });
  }, [day]); //배열에 포함된 값이 변경될 때만 useEffect가 실행 (day라는 변수에 의존성이 있다)
위의 useEffect 훅을 이용한 부분이 비슷하게 반복된다면,
나만의 custom hook을 만들어서, 유지보수를 쉽게 하고
코드를 간소화 시킬 수 있음
 
useFetch라는 훅을 만든다고 한다면
notion image
 
훅 폴더를 만들고,
 
안에 custom hook 내용을 채워줌
반복되는 부분은 그대로 두고,
바뀌는 부분이 url부분이라면, url을 매개변수로 받고
받은 url을 필요한 곳에 넣는다면, custom 훅이 만들어짐
// custom Hook 만들기
import { useEffect, useState } from "react";

//바뀔 수 있는건 url주소 밖에 없으므로
export default function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    //api비동기 통신을 위해 fetch이용
    fetch(url) //api경로 적음(get요청)-> promise 반환됨
      .then((res) => {
        return res.json(); //json으로 변환되고, promise를 반환하게 됨
      })
      .then((data) => {
        setData(data);
      });

    //배열에 포함된 값이 변경될 때만 useEffect가 실행 (day라는 변수에 의존성이 있다)
    //상태값과 무관하게 렌더링 직후 한번만 실행되는 작업은 빈 배열 전달.
  }, [url]);

  return data;
}

// data라는 상태값이 있고, API주소를 넘겨받아서
// fetch하고 응답받은 내용을 setData
// 완료 후, return
 
 
만든 custom hook을 원하는 곳에 사용하기만 하면 됨
import useFetch from "../hooks/useFetch"; 을 통해서 만든 훅을 불러오고
 
매개변수를 넣어서 작성하면, 아래와 같음
const words = useFetch(http://localhost:3005/words?day=${day});
 
기존의 코드와 비교하면, 훨씬 간소화된 것을 볼 수 있음.

  const [words, setWords] = useState([]);

  useEffect(() => {
    fetch(`http://localhost:3005/words?day=${day}`) //1일차 데이터만 가져오기 위해, ?day=1 형태로
      .then((res) => {
        return res.json(); //json형태로 값을 받아옴
      })
      .then((data) => {
        setWords(data);
      });
  }, [day]); //배열에 포함된 값이 변경될 때만 useEffect가 실행 (day라는 변수에 의존성이 있다)