[React] 코딩앙마 리액트 기초강좌 #12. useEffect, fetch()로 API호출

zzzzsb·2022년 5월 30일

React 강좌

목록 보기

10/12

#12. useEffect, fetch()로 API호출

API 있으니까 dummy data 변경해주자

Day.js

import { useState } from 'react';
import { Link } from "react-router-dom";

export default function DayList() {
  const [days, setDays] = useState([]);

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

dummy데이터 임포트하는거 삭제

days state 만들고 → 처음에는 빈배열로 만들어주고, API에서 list 가져와서 바꿔주는 방식으로 구현예정

useEffect Hook

어떤 상태값이 바뀌었을때 동작하는 함수 작성할 수 있음

첫번째 매개변수: 함수

함수가 호출되는 타이밍

→ 렌더링 결과가 돔에 반영된 직후
→ 컴포넌트가 사라지기 직전에도 마지막으로 호출됨.

useEffect 예제 - DayList.js

import { useEffect, useState } from 'react';
import { Link } from "react-router-dom";

export default function DayList() {
  const [days, setDays] = useState([]);
  const [count, setCount] = useState(0);

  function onClick() {
    setCount(count + 1);
  };

  useEffect(() => {
    console.log("Count Change");
  });

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

버튼 클릭할때마다 count값이 증가하며 Count Change 출력함

useEffect는 상태값이 변경되면 다시 렌더링해서 호출됨

만약 렌더링 끝난 후 어떤 작업을 하고 싶다면(ex. API 호출) useEffect 첫번째 매개변수로 함수 전달해주자

→ but 이렇게 하면 매번 변경 일어날 때마다 불필요하게 함수 호출할 수 있음(원하지 않는 상황에 호출된다던가?)

예시

Day change 버튼 만들어서 기존 배열에 day를 하나씩 추가해준다.(Day는 1로 고정)

버튼을 누르면 위 사진처럼 Day1이 계속 추가됨, 그런데, Count change가 계속 출력되고 있다(count 값 변하지 않았는데) → 불필요한 실행을 하고 있다는 것!

→ 해결필요,,

두번째 매개변수: 배열

useEffect(() => {
    console.log("Count Change");
}, [count]);

count가 변경될때만 useEffect 호출
[count]는 의존성 배열이라고 함
의존성 배열의 값이 변경되는 경우만 함수 실행됨

우리가 여기서 useEffect를 사용하는 목적은 API 호출하는것 → 렌더링 완료 후 최초로 API 호출 한번만 해주면 된다! → 의존성 배열에 빈 배열 입력

useEffect(() => {
    console.log("Count Change");
}, []);

⭐️ 상태값과 무관하게 렌더링 직후 한번만 실행되는 작업은 빈 배열만 전달하면 됨

API 호출 - fetch

DayList.js

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

res는 HTTP응답, 실제 json 아님

→ 이제 dummy로 사용했던 부분 교체해주면 됨.

Day.js

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