React Hooks: useEffect 사용법

useEffect 사용법

sideEffect 처리를 위해 제공되는 Hook에 대해서 알아보자!!

Side Effect란?

React 화면에 렌더링된 이후에 비동기로 처리 되어야 하는 부수적인 효과를 Side Effect라고 하는 데 대표적인 예로는 React 화면단에서 어떤 데이터를 가져오기 위해서는 외부 API를 호출하는 경우, 화면에 렌더링을 하고 실제 데이터는 비동기적으로 가져오는 것이 좋다.(비동기는 차후에 또 블로그 끄적여보겠다.) 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수도 있고 사용자 경험 측면에서 유리하다.

useEffect() - 함수 기반 Side Effect

React hooks 에서 제공하는 useEffect() 함수를 사용하면 이런 부분을 간단하게 해결할 수 있는 데

  const byteArrayImgUrlRes = async () => {
    if (productsReducer) {
      const result = await Promise.all(
        productsReducer.list.map(
          async (el, _) => await byteImgUrl(el.itemImage)
        )
      ).then((response) => {
        return response.flat();
      });
      setImageTransUrl(result);
    }
    const productByte = _.cloneDeep(productsReducer);
    if (productByte && imageTransUrl) {
      productByte.list.map((el, index) => {
        el.itemImage = `data:image/*;base64,${imageTransUrl[index]}`;
      });
      setProductByte(productByte);
    }
  };

  useEffect(() => {
    byteArrayImgUrlRes();
    setVideoThumbnail(ProductByte?.list[coverImageNum].itemImage);
    if (ProductByte) {
      return;
    }
  }, [...imageTransUrl, productsReducer]);

api 를 호출하는 부분인 byteArrayImgUrlRes api를 만들고 그 이후에 useEffect 에서 함수를 실행하여 비동기적으로 호출을 진행해준다.
그 이후에 setVideoThumbnail 리덕스 툴킷의 액션을 활용하여 해당 값을 담아준다.

마치면서

useEffect 는 sideEffect 처리를 위해 제공되는 방법이기도 하고 화면에 렌더링된 이후에 비동기로 처리 되어야 하는 부수적인 효과를 Side Effect를 하기 위한 Hook 이다.