[React] UseEffect 이해하기

이번글에는 useEffect를 알아보도록 하겠습니다.

useEffect란?

useEffect는 해당 컴포넌트가 렌더링(업데이트)가 될때 실행 시켜주는 하나의 리액트 훅입니다. 컴포넌트가 렌더링 되는 타이밍은 첫 컴포넌트가 등장했을때 컴포넌트에 변화가 생겼을때등 여러 상황들이 있습니다.

사용 예시

예시로, 옷을 파는 쇼핑몰이 있다고 가정보겠습니다. 한 유저가 아이쇼핑을 하다가 이쁜 옷이 있어서 상세보기를 위해 detail페이지에 들어는데, 유저에게 2초후에 재고가 얼마 안남았습니다! 라는 alert창을 띄어주고 싶다면 그때 useEffect를 이용하여 alert를 실행시키는 코드를 적어주면 됩니다.

사용방법

1. import React, { useEffect} from "react"; 상단에 훅을 import 해줍니다.

2. useEffect 훅 안에 만들고 싶은 코드를 입력합니다.

useEffect(() => {
    const showAlert = setTimeout(() => {
      alert("재고가 별로 안남음!");
    }, 2000);

    return () => {
      clearTimeout(showAlert);
    };
  }, []);
  //제가 만든것은 컴포넌트가 처음 렌더링 되었을때만 setTimeout 가 실행되고 나가면 clearTimeout되는 코드입니다.

코드 살펴보기

1. 실행 함수 - useEffect의 콜백함수 뒤에 나오는 코드(setTimeout)

2. 컴포넌트가 사라질때 실행할 함수 - return 입력후 콜백 함수 (clearTimeout)

3. 특정 값이 업데이트 될때만 실행시키고 싶을때 - 마지막 쉼표 뒤에 []을 입력하여 컨트롤합니다. 아무것도 지정을 안하게되면 어떠한 컴포넌트가 렌더링이 될때마다 계속 useEffect가 실행이 됩니다. 즉, []만 입력하면 첫 컴포넌트 렌더링시에만 실행이되고, [keyword]라고 적으면 keyword 상태값이 변화가 있을때만 실행하는 것입니다.

참고자료
https://ko.reactjs.org/docs/hooks-reference.html#useeffect