📖[React] Custom Hooks

Custom Hook 만들기

1. hooks 폴더 생성
2. use이름.js
3. 쓸 수 있도록 parameter 등으로 받아 주기
4. 수정사항은 만들어놨던 Custom Hook만 사용

예시

useFetch.js

import { useState, useEffect } from "react";
export default function useFetch(url) {
  
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setData(data);
      });
  }, [url]);

  return data;
}

1. 바뀔 수 있는 것: api 주소, 따라서 para로 받고 fetch에도 바꾸어줌
2. 의존성 배열도 바뀔 수 있으므로 url로 입력
3. useState도 어디든 사용할 수 있게 const[data, setData]=useState([])로 설정
4. 필요로 하는 것은 data 이므로 return data

DayList.js

import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";

export default function DayList() {
  const days = useFetch("http://localhost:3001/days"); 
  //useFetch return값을 days로 받음

  return (
    <ul className="list_day">
      {days.map((day) => (
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>Day {day.day}</Link>
        </li>
      ))}
    </ul>
  );
}

Day.js

import dummy from "../db/data.json";
import Word from "./Word";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import useFetch from "../hooks/useFetch";

export default function Day() {
  const { day } = useParams();
  const words = useFetch(`http://localhost:3001/words?day=&{day}`);

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  );
}