<React>커스텀훅

필요한 기능들을 담은 새로운 함수를 만드는것
return값으로 배열을 받는다

예시로) fetch받는 함수를 커스텀훅으로 만들어보겠다!
useEffect에서 fetch하여 데이터를 받아오는 훅을 useFetch.js파일에 만들어준다

//useFetch.js
import { useEffect, useState } from 'react';

export default function useFetch(url) { //url자리가 계속 바뀔예정
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url) //필요한 url이 바뀔예정이다
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return data; //결국 필요한 data를 리턴해서 받을예정
}

useFetch()를 import해서 필요한 곳에 훅을 사용한다

import useFetch from '../hooks/useFetch';

function Day() {
  const { day } = useParams();
  const words = useFetch(`http://localhost:3004/words?day=${day}`); //return한 값==data를 words로 받는다
  return (
    <>
   ...
        <tbody>
          {words.map((word) => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
     ...
    </>
  );
}
export default Day;