UseEffect에서 return 사용(clean up) ex) clearInterval

언제 사용하나?

=> useEffect 에서 원하는 동작을 return 하면 Component가 Unmount(화면에서 사라질)될 때  or 다음 렌더링 될 때 실행된다.

 

사용예시)

기능)

- timer 버튼을 누르면 1초에 1번씩 console에 출력한다.

- 다시 timer 버튼을 누르면 출력을 멈춘다.

 

 

Code)

 

1) Clock Component

=> Timer Component가 showTimer 값에 따라 mount(showTimer =true) , unmount (showTimer =false) 

 

import React, { useState } from "react";
import Timer from "./Timer";
function Clock(){

    const [showTimer,setShowTimer] = useState(false);

    const clickHandler = ()=>{
        setShowTimer(!showTimer);
    }
    
    return(
        <>
            <div>
                { showTimer && <Timer/>}
            </div>
            <button onClick={clickHandler}>timer</button>
        </>
    )
}

export default Clock;

 

 

2) Timer Component

=> 첫 렌더링 시 useEffect 실행 ,1초에 1번 씩 console에 출력을 한다.

import React, { useEffect } from "react";

function Timer(){
    useEffect(()=>{
        console.log('시작');
        
        const timer = setInterval(()=>{
            console.log("1초에 한 번 출력 중");
        },1000);

        return()=>{
            console.log('출력을 멈춤');
            clearInterval(timer);
        } 
    },[])

    return(
        <div>
            <span>콘솔에 출력 중</span>
        </div>
    )
}

export default Timer;

 

 

결론)

Timer가 mount 일 때 SetInterval 함수로 1초에 1번씩 console 출력

Timer가 unmount 일 때 useEffect에 return 해준 clearInterval 이 실행되면서 출력을 멈춤.