[React] fetch API 데이터 가져오기 : json, useEffect & async 활용

 

 

💡 리액트에서 api 데이터를 가져와보자!

 

import { useEffect, useState } from "react";

function JsonApp() {
  const [data, setData] = useState([]); {/*데이터 들어갈 곳 초기 설정*/}

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts`)
      .then((response) => response.json())
      .then((json) => {
        setData([...json]); {/*가져온 json 복사해 데이터 갱신*/}
        return console.log(json);
      });
  }, []);

  return (
    <div>
      <div>
        {data.map((item) => ( {/*가져온 데이터 하나씩 출력*/}
          <div
            key={item.id}
            style={{
              border: "1px solid pink",
              margin: "10px",
              padding: "10px",
            }}
          >
            <h3>
              {item.id} {item.title}
            </h3>
            <p>{item.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default JsonApp;

 

그럼 페이지에도 잘 나오고, 콘솔에 데이터도 잘 찍힌다 ~

 

🫐 async / await 활용해보기!

async 함수를 useEffect 에서 써보려했는데 에러가 떴다. 🙅‍♂️ useEffect(async()=>{}) 🙅‍♂️

이유는 "useEffect 는 아무것도 반환하지 않거나 clean up 함수를 반환해야 한다." 라고 ~

 

그래서 async 함수를 useEffect 밖에 만들어주고 호출해서 쓰기로 했다.

(함수 그대로 useEffect 내에 써줘도(넣어줘도) 된다!)

function JsonApp() {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts`);
    const json = await response.json();
    setData([...json]);
    console.log(json);
  };

  useEffect(() => {
    fetchData(); {/*함수 호출*/}
  }, []);

  return (
    ...
  );
}