[React] useEffect (feat. 무한루프)

처음 페이지를 열었을때 알아서 데이터를 불러오도록

만들어주는 'useEffect' 훅을 알아보자.

 

import { useEffect, useState } from "react";
import { getReviews } from "./api";
import ReviewList from "./components/ReviewList";

const App = () => {
  const [items, setItems] = useState([]);

  const handleLoad = async () => {
    const { reviews } = await getReviews();
    setItems(reviews);
  };
  handleLoad();

  return (
    <div>
      <div>
        <button onClick={handleNewClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete} />
      <button>불러오기</button>
    </div>
  );
};
export default App;

 

async, await 비동기 문법을 사용하고 있다. (ES8문법)

콘솔창에 찍어본다면? 무한루프 발생..ㄷㄷ

당황하지말고 sources 에서 정지 버튼 누르기..

 

우선 처음 부모인 App.js를 랜더링할때는

app() 함수를 실행한다. 순차적으로 위에서 아래로 실행하다가

handleLoad 함수를 실행하는데 참고로 이 함수는 비동기함수니까?

비동기로 request를 보냈다가 response가 도착하면 reviews라는 변수를 지정하고

setItems를 통해서 state를 변경해준다.

state가 변경되면 App.js를 재랜더링하기 때문에 App.js 함수를 다시 실행하게 된다.

이과정에서 또 비동기적으로 handleLoad 함수를 실행하게 되니까 무한루프가 발생하는 것이다. 

 

이럴때 사용하는 훅이 바로 useEffect

useEffect(() => {
  handleLoad();
}, []);

이렇게 넣어주면 처음실행할때 한 번만 랜더링 되기때문에 데이터가 잘 불러와진다