⚛️Start! React : section13 - Custom Hooks

우리가 전시간에 fetch를 내장한 useEffect를 이용했다. 이는 DayList컴포넌트와 Day컴포넌트에 모두 사용된다. 중첩되는 부분이고 이를 처리하기 위해서 우리들만의 Hook을 제작할 것이다. 아래 함수를 살펴보자.

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;

}

useFetch의 매개변수를 url로 설정하고 우리가 원하는 API의 값을 가지고 와서 원하는 data를 return하는 방식이다. 그러면 해당 함수는 return한 값이 된다. 이를 적용한 Day.js와 DayList.js를 살펴보자.

* Day.js

import { useParams } from "react-router-dom";

import Word from "./Word";

import useFetch from "../Hooks/useFetch";

export default function Day() {

  // const { day } = useParams();

  const day = useParams().day;

  const words = useFetch(`http://localhost:3001/words?day=${day}`)

  return <>

    <h2>Day {day}</h2>

    <table>

      <tbody>

        {words.map(word => {

          return (

            <Word word={word} key={word.id}></Word>

          )

        })}

      </tbody>

    </table>

  </>;

}

* DayList.js

import { Link } from "react-router-dom"

import useFetch from "../Hooks/useFetch";

export default function DayList() {

  const days = useFetch('http://localhost:3001/days');

  return (

    <ul className="list_day">

      {days.map(day => {

        return (

          <li key={day.id}>

            <Link to={`/day/${day.day}`}> Day {day.day} </Link>

          </li>

        )

      })}

    </ul>

  );

}

이번 수업은 useEffect와 fetch 그리고 url을 잘 이해했다면 쉽게 이해할 수 있을 것이다.