[React] useEffect에 대해 알아보자!

❇️ useEffect란?

useEffect 훅은 컴포넌트의 사이드 이펙트를 관리하는 훅으로, useEffect를 사용하면 컴포넌트의 상태나 속성(props)이 변경될 때 원하는 작업을 수행할 수 있다.

여기서 사이드 이펙트란, 컴포넌트가 처음 마운트될 때, 컴포넌트가 업데이트될 때, 컴포넌트가 언마운트 될 때 일어나는 모든 동작을 의미한다. 예를 들어 API 요청, 이벤트 리스너 등이 있다.

(컴포넌트 마운트란 컴포넌트가 나타나는 것을, 언마운트는 삭제되는 것을 의미한다.)

useEffect를 사용하는 이유

1. 사이드 이펙트 관리
   useEffect를 사용하면 컴포넌트에서 발생하는 사이드 이펙트를 처리할 수 있다.

2. 컴포넌트의 상태나 props 변화에 대한 의존성 관리
   useEffect는 컴포넌트의 상태나 props 변화에 대한 의존성을 관리할 수 있다. 의존성 배열에 값을 등록하면, 해당 값이 변경될 때만 실행되도록 제어할 수 있다.

3. 비동기 작업 처리
   useEffect 내부에서 async/await을 사용해 비동기 작업을 수행할 수 있다. 또한, useEffect를 사용해 비동기 작업을 시작하고, 반환된 함수에서 비동기 작업을 취소할 수 있다.

4. 여러 개의 useEffect 사용 가능
   한 컴포넌트에서 여러 개의 useEffect를 사용할 수 있는데, 이를 통해 각각의 작업을 분리하고 관리할 수 있다.

useEffect를 사용하면 컴포넌트에서 사이드 이펙트를 처리하고, 의존성을 관리하는 등 다양한 작업을 수행할 수 있다. 이를 통해, 코드의 가독성과 유지보수성을 높일 수 있다.

useEffect 훅의 기본 형태

import React, { useEffect } from 'react';

	useEffect (
      // 마운트 시 실행할 함수(= 이펙트 함수);
      return {
      	// 언마운트 시 실행할 함수(= 클린업 함수);
      }
	}, [의존값 배열]);

// 의존값 배열이 비어 있으면 최초 마운트 시에만 이펙트를 호출한다.
// 의존값이 존재하지 않으면 컴포넌트가 렌더링될 때마다 이펙트를 호출한다.

이펙트 함수 호출 시점
컴포넌트가 처음 마운트될 때, 의존값으로 주어진 값이 변경될 때 호출된다.

클린업 함수 호출 시점
이펙트 함수가 호출되기 전, 컴포넌트가 언마운트될 때 각각 클린업이 호출된다.