[React Hook] useEffect를 사용한 데이터 fetch

서해빈·2021년 6월 10일
0

Javascript

목록 보기
10/11

결론부터!

  • 컴포넌트내에서 데이터를 동적으로 가져오므로 state 사용
  • useEffect를 사용해 rendering 이후 fetch. 이후 state 갱신

주의할 점

useEffect의 두 번째 매개변수로 빈 배열을 주어서 첫 컴포넌트 마운트 시에만 render하도록 해야한다!
그렇지 않으면 render <-> useEffect 무한 지옥에 빠진다...ㅎㅎ

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const { applicationID } = useParams();
  const [applicationData, setApplicationData] = useState();
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios({
          method: 'get',
          url: `/application/${applicationID}`,
          baseURL: 'http://localhost:3001/api',
          timeout: 2000,
        });
        setApplicationData(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);
 
  return (
    <S.Application>
      {applicationData ? <ApplicationView values={applicationData} /> : null}
    </S.Application>
  );
}
 
export default App;

cf) useEffect 내부에서 굳이 fetchData를 선언하고 호출한 이유

async 함수를 resolved promise를 반환한다. 하지만 effect hook은 아무것도 반환하지 않거나 메모리 누수를 방지하기 위한 clean-up 함수만을 반환해야 한다. 따라서 useEffect에서 async를 직접적으로 사용하는 것이 허용되지 않기 때문에 저렇게 간접적인 방식으로 사용했다.

/* 잘못된 예시
 * Warning: useEffect function must return a cleanup function or nothing.
 *     Promises and useEffect(async () => ...) are not supported, but you can call
 *     an async function inside an effect.
 */
useEffect(async () => {
  try {
    const response = await axios({
      method: 'get',
      url: `/application/${applicationID}`,
      baseURL: 'http://localhost:3001/api',
      timeout: 2000,
    });
    setApplicationData(response.data);
  } catch (error) {
    console.error(error);
  }
}, []);

참고 및 출처

0개의 댓글