📖[React] useEffect, fetch()로 호출

useEffect()

상태값이 바뀌었을 때 동작하는 함수를 작성
상태값이 변경되서 다시 렌더링되었을 때 호출
그러나 원하지 않은 상황에서도 호출될 수 있음-> 불필요한 실행
따라서 두번째 매개변수 [변경되는 값] 이 변경되는 경우에만 함수가 실행됨.
useEffect(함수, [변경되는 값]);
최초의 한 번만 호출 -> useEffect(함수, [])
빈배열! -> 렌더링 직후 한번만 호출

Api 호출

 const [days, setDays] = useState([]);

 useEffect(() => {
    fetch("http://localhost:3001/days").then((res) => {
      return res.json();
    })
   .then((data) => {
        setDays(data);
      });
  }, []);

1. API 비동기 통신 = fetch('api경로')이용
2. .then을 이용해서 res(response).json을 통해 return해줌
3. 이 때, response는 http 응답이고 실제 json은 아님
4. .then을 통해 data를 받아서 setDays를 data로 해줌
5. useEffect()에 빈배열을 넣어 주어야 한 번만 호출됨..! 안 그러면 terminal 난리..

dummy로 사용했던 부분을 교체해주기

Day.js

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

export default function Day() {
  const { day } = useParams();
  // const wordList = dummy.words.filter((word) => word.day === Number(day));
  const [words, setWords] = useState([]);

  useEffect(() => {
    fetch(`http://localhost:3001/words?day=&{day}`)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setWords(data);
      });
  }, [day]);

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

이 때 useEffect부분에서,http://localhost:3001/words?day=&{day}
const {day} = useParam()을 이용해서 주소창에 있는 문자열이 들어오는 것
이 때 useEffect내부에서 day와 같이 특정값을 사용하면 의존성 배열에 입력해야 함. 의존성 배열이 배열이면 day가 변경되어도 새로운 값을 가져올 수 없음!
(한번만 렌더링되기 때문)
따라서 [day]로 넣어주기!

사용 예시 비교

DayList.js

 const [days, setDays] = useState([]);

 useEffect(() => {
    fetch("http://localhost:3001/days").then((res) => {
      return res.json();
    })
   .then((data) => {
        setDays(data);
      });
  }, []);

Day.js

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

  useEffect(() => {
    fetch(`http://localhost:3001/words?day=&{day}`)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDays(data);
      });
  }, [day]);

1. state를 만들기
2. fetch로 list를 가져옴
3. set을 해준다!
   이는 동일한 logic이므로 사용자가 hook을 만들어서 사용할 수 있음!