useEffect란?

useEffect는 React에서 제공하는 Hook으로, 외부 시스템을 컴포넌트를 통해 동기화할 수 있게 해주는 것

사용하는 이유

• 너무 오래걸리는 함수의 경우 UI 렌더링을 블로킹 할 수 있다
  -> useEffect는 렌더링이 다 끝나고 읽기 시작하기 때문에 문제를 해결할 수 있다.
• 컴포넌트 안에 바로 함수를 넣게 되면 리렌더링 될 때마다 매번 실행된다
• 디버깅 용도로도 사용할 수 있다

사용방법

1. import

import { useEffect } from 'react';

2. 기본형

useEffect(() => {
  ... // code
});

위와 같이 사용하면 모든 렌더링마다 useEffect 함수가 실행된다

3. 조건 추가

useEffect(() => {
  ... // code
}, []);

위의 경우는 컴포넌트가 처음 마운트 되었을때만 실행되기 때문에 초기에 한번 실행할 작업이 있을때 위와 같이 사용한다.

4. 조건에 값 추가

let a = 123;

useEffect(() => {
  ... // code
}, [a]);

useEffect에 조건 대괄호 안에 값이 들어갈 수도 안들어갈 수도 있다. 이를 dependency 라고 부르며 그 값에 의존하여 useEffect 함수의 실행여부를 결정한다.

위와같이 dependency 값에 a가 들어가면 a값이 변경될 때 useEffect를 실행한다.

5. cleanup 함수

useEffect(() => {
  ... // code
  
  return () => {
    ... // cleanup code
  }
});

cleanup 함수라는 기능은 컴포넌트가 사라질 때 호출되는 부분으로 메모리 누수를 방지하는 관리를 하기 위해서 사용한다.