React - useEffect란?

 

React Hook 중에는 useEffect라는 Hook이 존재한다. useEffect란 리액트에서 기본적으로 제공해주는 함수로써, useEffect함수가 포함된 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경되거나 redux store의 값이 변경될 때 실행할 구문들을 정의해놓은 함수이다.

0. useEffect import방법

import { useEffect } from 'react';

react가 설치되어있으면 추가적으로 설치할 것 없이 위와같이 파일 상단에 추가하면 useEffect를 손쉽게 사용할 수 있다.

1. useEffect의 기본 형태

useEffect(() => {
  ... // 실행할 내용들
});

useEffect의 기본 형태는 위와 같다. 위와 같이 사용하면 모든 경우에 해당 useEffect 함수가 실행된다.

2. 비어있는 dependency 추가

useEffect(() => {
  ... // 실행할 내용들
}, []);

위의 경우는 컴포넌트가 처음으로 마운트되었을 때 실행된다. 이 경우에만 실행되고 다른 경우에는 실행되지 않기에 초기에 한 번 실행할 작업들이 필요할 때, 위와 같이 사용하면 된다.

3. dependency 값 추가

let something = 2;

useEffect(() => {
  ... // 싫행할 내용 
}, [something]);

useEffect에는 [] 안에 값이 들어가거나 들어가지 않는 경우가 있다. 이를 dependency 라고 부르는데 dependency 파라미터 값에 의존하여 useEffect 함수가 실행될지 말지를 결정한다.

위와같이 dependency값에 something이 들어가 있는 경우에는 해당 변수의 값이 변경될 때, useEffect 함수가 실행된다.

something이라는 값을 순차적으로 3, 4, 5로 총 세 번 변경하게 되면, 해당 useEffect함수는 3번 실행되게 된다.

4. cleanup 함수

useEffect(() => {
  ... // 실행할 내용
  
  return () => {
    ... // cleanup
  }
});

useEffect에는 해당 컴포넌트가 언마운트될 때 실행되는 cleanup함수라는 기능이 있다. cleanup함수는 컴포넌트가 사라질 때 호출되는 부분으로 메모리누수를 방지하여 메모리 관리를 하거나 컴포넌트가 사라질 때, 수행할 작업들을 추가하기 위해 사용한다.

 

• Mounting : 컴포넌트가 최초로 나타낼 때를 뜻한다.
• Rendering : 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻한다.
• UnMount : 컴포넌트가 사라질 때를 뜻한다.
• 쉽게 정리하면 컴포넌트가 처음 나타날 때를 마운트라 부르고 그 이후에 값이 변경되어 컴포넌트가 변경된 상태에서 나타날 때를 렌더링이라고 부른다.

 

cleanup함수를 사용하는 이유

https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

Understanding React’s useEffect cleanup function - LogRocket Blog

 

cleanup함수를 사용하지 않아 발생하는 오류와 관련된 내용

https://phsun102.tistory.com/74

React - Can't perform a React state update on an unmounted component 에러