useEffect란?

useEffect는 React에서 제공하는 Hook 중 하나로, 함수형 컴포넌트에서 부수 효과(side effect)를 다루기 위한 목적으로 사용된다.

쉽게 말해 컴포넌트가 화면에 보여질때나 사라질때 무언가를 실행 시키고자 하면 useEffect를 사용하면 되겠다.

useEffect의 기본구조

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 이 부분이 실행된다.
    console.log('useEffect');
  });

  return <div>test</div>;
};

export default MyComponent;

컴포넌트가 렌더링이 되자 console.log가 실행 되는 것 을 확인 할수 있다.

useEffect와 리렌더링

useEffect와 리렌더링 간의 관계는 useEffect가 컴포넌트가 마운트되거나 업데이트될 때 실행되기 때문에 밀접한 연관이 있습니다.

위와 같은 버튼이 있고 누르게 되면 초기값이 0인 state가 1씩 증가하도록 연결했다.
버튼을 10번 누르자 useEffect도 동일하게 실행되는 것 을 볼수 있다.
버튼만 눌렀을 뿐 인데 왜 useEffect가 실행이 된거지?
간단하다 state가 변경되면서 컴포넌트가 리렌더링 되었기 때문에 useEffect가 다시 실행되기 때문이다.

의존성 배열

이를 해결하기 위해 useEffect에는 의존성 배열이라는 것이 있다.
배열에 값을 넣고 그 값이 바뀔 때만 useEffect를 실행하는 것인데

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 이 부분이 실행된다.
    console.log('useEffect');
  }, []);

  return <div>test</div>;
};

export default MyComponent;

간단하다 위 코드 useEffect부분에 빈 배열만 넣을 경우
컴포넌트가 렌더링 되고 버튼을 몇 번을 누르더라도 처음에 실행된 hello useEffect외에는 더 이상 실행이 되지 않는 것을 볼 수 있다.

const [hi, setHi] = useState(0);

useEffect(() => {
    // 이 부분이 실행된다.
    console.log("hello useEffect");
  }, [hi]);

그러면 다시 배열안에 hi라는 State를 넣고 버튼을 눌러보면

useEffect가 계속 실행되는 것을 볼 수 있다.
의존성 배열 안에 있는 hi라는 State가 변경되면 리렌더링 하면서 useEffect가 실행되는것.

마무리

useEffect를 사용 할땐 꼭 임포트해서 사용할 것.