Clean up 함수

실행 시점

• 컴포넌트 update 직전
• 컴포넌트 unmount 직전

예시 코드

// App.jsx
import { useState } from "react"
import Modal from "./Modal"

const App() => {
	const [isOpen, setIsOpen] = useState(false)
    
    return (
    	{isOpen && <Modal />}
        <button onClick={() => setIsOpen(!isOpen)} >
        	모달열기
        </button>
    )
}

// Modal.jsx
import React, { useEffect } from "React"

const Modal() => {
	useEffect(() => {
    	let count = 0
        const interverId = setInterval(() => {
        	count++
        }, 1000)
        return () => {
        	clearInterval(interverId)
        }
    },[])
    return <div>Modal</div>
}
export default Modal

Modal.jsx 코드에서 return () => {cleanInterval(interverId)} 처럼 return 뒤에 함수를 작성해서 사용한다
❗️ setInterval()은 고유의 ID를 제공하기 때문에 interverId에 ID를 담아주고 clearInterval로 해당 ID를 멈춘다