✒️ 2025-05-28 10:47 내용 수정

useEffect(Effect Hook)

React가 Component를 렌더링한 후 side effect를 수행하도록 할 때 사용하는 Hook

• side effect : 데이터 가져오기, 구독 설정, 수동으로 Component DOM 수정하기 등 추가적인 동작
• 참고 자료 : React Using the Effect Hook, W3School React useEffect Hooks
• useEffect()를 사용하면 React는 매 렌더링 후(첫번째 렌더링과 이후 모든 업데이트) useEffect 내에 있는 effect 함수를 실행한다.
• Component 안에서 useEffect()를 사용함으로써 state 변수나 어떤 property에도 접근할 수 있어 특별한 API 없이도 값을 얻을 수 있다.

• React가 DOM을 업데이트 하고 추가로 코드를 실행하는 것을 정리(Clean-up)이라고 한다.
• Clean-up을 수행하지 않는 경우 : 반환하는 함수가 없다.

import {useState, useEffect} from 'react';

function Test() {
	const[count, setCount] = useState(0);

	// clean-up을 하지 않는 경우
	useEffect(() => {
		// 실행 내용
	}) // 매 렌더링 때 effect 실행 

	useEffect(() => {
		// 실행 내용
	}, []) // 최조 렌더링에만 effect 실행 

	useEffect(() => {
		// 실행 내용
	}, [count==1]) // count가 1일 때만 실행

	return(
		// tag 내용
	)
}

• Clean-up을 수행하는 경우 : Clean-up을 할 때는 useEffect()에서 함수를 반환한다.
  • React는 useEffect()에서 반환한 함수를 Clean-up이 필요한 때에 실행하며, 시점은 Component가 마운트 해제(컴포넌트 제거)될 때 Clean-up을 실행한다.
  • React는 effect가 렌더링이 실행될 때마다 실행되기 때문에 다음 차례의 effect를 실행하기 전 이전 렌더링에서 파생된 effect를 정리한다.
    • 메모리 누수가 발생하면 안되는 동작들(setTimeout 등)에선 Clean-up을 수행하는 것이 중요하다.
    • Clean-up 예시 : React 정리를 이용하는 Effects
  • effect를 실행하고 clean-up하는 과정을 한 번만 실행하고 싶다면 빈 배열 "[]"를 두 번째 인수로 넘긴다.

import {useState, useEffect} from 'react';

function Test() {
	const[count, setCount] = useState(0);
	
	// clean-up을 하는 경우
	useEffect(() => {
		function effectFunction() {
			// 실행할 내용
		}
		// DOM 업데이트 후 추가 실행 코드
		return function cleanup() { // 함수를 반환한다.
			// clean-up을 위한 동작
		}
	})

	useEffect(() => {
		function effectFunction() {
			// 실행할 내용
		}
		// DOM 업데이트 후 추가 실행 코드
		return function cleanup() {
			// clean-up을 위한 동작
		}
	}, []) // clean-up 1회만 실행
	

	useEffect(() => {
		function effectFunction() {
			// 실행할 내용
		}
		// DOM 업데이트 후 추가 실행 코드
		return function cleanup() {
			// clean-up을 위한 동작
		}
	}, [count==1]) // 특정 조건에서만 effect 실행

	return(
		// tag 내용
	)
}