[React, Next.js] useEffect 정리 (마운트, 언마운트, 값 변경)

useEffect Hook 정리

1. useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.

2. deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.

3. useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고 부른다.

 * cleanup함수는 useEffect 에 대한 뒷정리를 해주는 개념으로 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다.

 

마운트 시에 하는 작업들

 - props 로 받은 값을 컴포넌트의 로컬 상태로 설정
 - 외부 API 요청 (REST API 등)
 - 라이브러리 사용 (D3, Video.js 등...)
 - setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

 

언마운트 시에 하는 작업들

 - setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기
 - 라이브러리 인스턴스 제거

 

deps 배열을 비워두거나 특정 값 넣었을 시

1. deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.

2023.03.17 - [개발 프레임워크/React, Next.js] - useEffect라는 Hook을 사용해서 렌더링 후 코드실행

useEffect라는 Hook을 사용해서 렌더링 후 코드실행

 

2. deps가 비어있는 경우에는 컴포넌트가 사라질 때 리턴함수 부분이 언마운트시에 호출된다.

2023.03.17 - [개발 프레임워크/React, Next.js] - useEffect를 사용해서 컴포넌트가 사라질 때 코드실행

useEffect를 사용해서 컴포넌트가 사라질 때 코드실행

 

3. deps 안에 특정 값이 있다면 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출된다.

4. deps 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출된다.

2023.03.17 - [개발 프레임워크/React, Next.js] - useEffect를 사용해서 값이 변경될 때 코드실행

useEffect를 사용해서 값이 변경될 때 코드실행