⚛️Start! React : section12 - useEffect()&fetch()

이전 시간에서는 우리가 json-server를 통해서 API를 가지고 왔다. 가지고온 이 API를 활용하기 위해서 기존에 import 했던 dummy data를 지우고 uesEffect를 사용해서 API로부터 데이터를 가지고 올 것이다. 우선 DayList.js 코드를 살펴보자.

* DayList.js

import { useState, useEffect } from "react";

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

export default function DayList() {

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

  useEffect(() => {

    fetch('http://localhost:3001/days')

      .then(res => {

        return res.json() //res는 실제 json이 아니기에 형변환해야함

      })

      .then((data) => {

        setDays(data);

      });

  }, []);

  return (

    <ul className="list_day">

      {days.map(day => {

        return (

          <li key={day.id}>

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

          </li>

        )

      })}

    </ul>

  );

}

우선 day버튼을 눌렀을 때 동적으로 값이 변경된다. 그리고 해당 버튼들은 data의 값 만큼 루프를 돌아 생성되고 있다. 따라서 day와 관련된 값들은 useState를 통해서 값이 변동 되어야한다.  여기서 useEffect는 랜더링이 된 결과가 DOM으로 반영된 직후에 호출된다. 따라서 데이터들이 모두 전달이 되고 나서야 day들이 브라우저에 나타나게 된다. fetch를 통해서 전달 받은 day의 data들은 setDays로 days에 값을 할당하는 것이다. 강의를 듣고 얼핏보면 쉽다고 느끼지만 굉장히 복잡하다. 이제 나머지 Day컴포넌트들을 살펴보자.

* Day.js

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

import { useEffect, useState } from "react";

import Word from "./Word";

export default function Day() {

  // const { day } = useParams();

  const [words, setWords] = useState([]); //json data는 배열이기 때문에 빈배열을 넣어야 한다. []

  const day = useParams().day;

  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 => {

          return (

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

          )

        })}

      </tbody>

    </table>

  </>;

}

여기도 마찬가지이다. 다만 useParams를 통해서 "/day/:day"로 받아온 값을 fetch url주소 안에 있는 http://localhost:3001/words?day=${day}로 전달이 되면서 해당되는 필요한 날의 데이터들만 랜더링이 되게 하는 것이다. 굉장히 단순해 보이지만 꾀나 복잡하다. 아직 익숙하지 않고 여럿 사용하지 않아서이니 여러번 보고 연습하면 될 것이다.