[React] useEffect와 cleanup함수
useEffect의 cleanup함수에 대해 알아보자 ❕
지난 포스터와 같이 useEffect에서 cleanup 함수를 사용해야 할 때가 있다. cleanup 함수가 필요한 경우와 동작 과정이 어떻게 되는지 정리하려고 한다.
1. useEffect 란?
useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업(Side effect)을 실행할 수 있도록 하는 리액트 Hook이다. 컴포넌트가 mount, unmount, update됐을 때 특정 작업을 실행시킬 수 있다.
기본 형태는 useEffect(setup, dependencies?)로 사용되며, dependencies는 생략할 수 있다. dependencies에 빈 배열([ ])을 입력한 경우 컴포넌트가 처음 mount되었을 때 한번 호출되고, dependencies에 특정 값을 넣은 경우 이 값들이 변경될 때마다 호출된다.
다음과 같이 useEffect를 작성했다면, 컴포넌트가 처음 mount되었을 때 "hello"가 출력되고 상태값 dep가 변경될 때마다 "안녕"이 출력된다.
useEffect(() => {
console.log("hello")
}, [])
useEffect(() => {
console.log("안녕")
}, [dep])
2. cleanup함수란?
useEffect에서는 함수를 반환할 수 있는데 이를 cleanup 함수라고 부른다. cleanup 함수를 사용하면 컴포넌트가 unmount될 때 or 특정 값이 업데이트되기 직전에 실행할 작업을 지정할 수 있다.
즉, cleanup 함수는 다음과 같이 상황에서 실행된다.
- dependencies가 빈 배열([ ])인 경우, 컴포넌트가 unmount될 때
- dependencies에 특정 값을 설정한 경우, 해당 값들이 업데이트되기 직전
(2) 의 예로, dependencies에 상태값 count를 넣고 cleanup 함수가 언제 실행되는지 확인해봤다.
'더하자'라는 버튼을 클릭했을 때, count가 1 증가하도록 했다.
import { useEffect, useState } from "react"
export function Test() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
return () => console.log("cleanup : " + count); // cleanup 함수
}, [count])
const handleActionClick = () => {
setCount(prev => prev + 1)
}
return (
<>
<button onClick={() => handleActionClick()}>
더하자
</button>
</>
)
}
순서를 보면, count가 변경되기 전에 cleanup함수가 실행되어 `cleanup : count`가 출력되고, 그 후 변경된 `count+1`가 출력된다.
따라서 특정 값이 변경되기 전에 어떠한 작업을 수행하고 싶다면 cleanup 함수로 등록해 사용할 수 있다.
3. useEffect에서 cleanup 함수가 필요한 경우
React 공식문서에는 `setInterval()`, `window.addEventListener()` 등과 같이 React에 의해 제어되지 않는 작업에서 cleanup 함수를 사용하라고 한다.
예제
'버튼 활성화'을 클릭해 '더하기' 버튼을 활성화시키고, '더하기' 버튼을 클릭해 count를 증가시키려고 한다.
(여기서 '더하기'의 클릭 이벤트는 addEventListener()로 등록해 사용한다)
import { useEffect, useState } from "react"
export function Test() {
const [isActive, setIsActive] = useState(false); // 버튼 활성화 여부
const [count, setCount] = useState(0);
useEffect(() => {
if(!isActive) {
return
}
document.getElementById("add-button").addEventListener('mousedown', handleActionClick);
}, [isActive])
const handleActionClick = () => {
setCount(prev => prev + 1)
}
const handleChangeButtonActive = () => {
setIsActive(!isActive);
}
return (
<>
<div>
<button onClick={() => handleChangeButtonActive()}>
{isActive ?
<span>버튼 비활성화</span>
:
<span>버튼 활성화</span>
}
</button>
</div>
<div>
<button id="add-button" disabled={!isActive}>
더하기
</button>
</div>
<div>{count}</div>
</>
)
}
하지만 의도한 대로 동작하지 않는다. 일정하게 1씩 증가되지 않고, 버튼이 활성화 될 때(n)마다 count 값이 n+1씩 증가된다. 이는 isActive가 변경 될 때마다 useEffect의 document.getElementById("add-button").addEventListener('mousedown', handleActionClick)가 실행되고 이벤트리스너가 여러번 등록되어 발생하는 문제이다.
이 문제를 useEffect의 cleanup함수로 해결할 수 있다.
import { useEffect, useState } from "react"
export function Test() {
const [isActive, setIsActive] = useState(false);
const [count, setCount] = useState(0);
useEffect(() => {
if(!isActive) {
return
}
document.getElementById("add-button").addEventListener('mousedown', handleActionClick);
// cleanup : 이벤트리스너 제거
return () => document.getElementById("add-button").removeEventListener('mousedown', handleActionClick);
}, [isActive])
const handleActionClick = () => {
setCount(prev => prev + 1)
}
const handleChangeButtonActive = () => {
setIsActive(!isActive);
}
return (
<>
<div>
<button onClick={() => handleChangeButtonActive()}>
{isActive ?
<span>버튼 비활성화</span>
:
<span>버튼 활성화</span>
}
</button>
</div>
<div>
<button id="add-button" disabled={!isActive}>
더하기
</button>
</div>
<div>{count}</div>
</>
)
}
이제 버튼을 여러번 활성화시켜도 일정하게 1씩 증가하게 된다.
참고자료 😃
https://legacy.reactjs.org/docs/hooks-effect.html
https://react.dev/reference/react/useEffect#useeffect