React - useEffect 훅 사용하기 (훅에서 async await 함수 사용 포함)

가져온 데이터를 첫 화면에 출력하고, 업데이트 될 때마다 다시 렌더링하고자 할 경우?

---

클래스형 컴포넌트를 쓸 경우

라이프사이클 함수를 통해 처리하면 된다.

그러나 두 함수에 같은 코드를 중복으로 넣어야한다.

componentDidMount() {
   ...
   }
componentDidUpdate() {
   ...
   }

 

함수형 컴포넌트 + React Hook을 쓸 경우

useState() + useEffect() 조합을 사용하면 된다.

useEffect() 가 componentDidMount()와 componentDidUpdate() 기능을 모두 담당한다.

import React, { useState, useEffect } from "react";

const [count, setCount] = useState(0);

  useEffect(() => {
   setCount(count+1);
   // 혹은 아래와 같이 사용 (권장)
   setCount(current => current+1);
  });

※ cosnt [값, 변경함수] = useState() : 변경함수에 변경값 넣고 수행시 값을 변경하고 렌더링 재수행

※ useEffect() : 처음 컴포넌트 마운트될때 딱 1회 실행되고 값이 업데이트 될때 재수행

 

(참고) useLayoutEffect()

useEffect와 useLayoutEffect는 똑같은 형태로 사용가능.

useEffect의 이펙트는 DOM이 화면에 그려진 후 호출, useLayoutEffect는 그리기 전에 호출된다.

useEffect를 쓰면 가끔 Default값이 먼저 그려진 후에 화면이 다시 렌더링되는 것을 있을것인데
이럴때 useEffect 대신 useLayoutEffect를 쓰면 화면을 그리기 전에 값을 업데이트하여 해결할 수 있다.
(사실 별도의 Loading 화면이 있으면 딱히 쓸 일이 있을까 싶긴하다.)

 

 

비동기적으로 로드한 데이터를 첫 화면에 출력하고, 업데이트 될 때마다 다시 렌더링하고자 할 경우?

---

보통 API에서 데이터를 로드할때 비동기(async await)적으로 들고온다.

외부에서 가져오는 것이기도 하고 데이터량도 많기 때문이다.

 

이런 경우에도 크게 다를 것 없이

async, awiat로 데이터를 비동기적으로 로드하는 함수를 만들고 useEffect() 안에서 실행하면 된다.

 

(예시)

import axios from "axios";

const api = axios.create({
  baseURL: "https://api.coinpaprika.com/v1"
});

export const getPrices = () => api.get("/tickers");

 

import React, { useState, useEffect } from "react";
import { getPrices } from "../api";
import Loader from "../Components/Loader";
import Price from "../Components/Price";

const Prices = () => {
  const [state, setState] = useState({ loading: false, prices: [] });
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const getPricesFunc = async () => {
      setIsError(false);
      try {
        const { data } = await getPrices();
        setState({ loading: false, prices: data });
      } catch (e) {
        setIsError(true);
      }
    };
    getPricesFunc();
  }, []);

  return state.loading ? (
    <Loader />
  ) : (
    state.prices?.map((p) => <Price key={p.id} {...p} />)
  );
};

export default Prices;