[React] 라이프사이클 실습(mount,unmount)호출시기

Timer.js
import React, { useEffect } from 'react';

const Timer = (props) => {
   // Mount 할때 호출
   // UnMount 할때 호출
   // Update 할때 호출
    useEffect(() => {
        const timer = setInterval(()=>{
            console.log('타이머 돌아가는중...')
        },1000)
        // 리턴안의 값은 unmount 될때 실행
        return()=>{
            clearInterval(timer);
        }
    },[])
    return (
        <div>
            타이머를 실행합니다.
        </div>
    );
};
export default Timer;

import React, { useState } from 'react';
import Timer from './components/Timer';

const App3 = () => {
    const [showTimer, setShowTimer] = useState(false);
    return (
        <div>
            {showTimer && <Timer/>}
            <button onClick={()=>{ setShowTimer(!showTimer)}}>클릭하셈</button>
        </div>
    );
};

export default App3;

버튼을 누를시 타이머가 실행된다.

버튼을 클릭시

{showTimer && <Timer/>}

가 실행되며 showTimer가 true일시 Timer.js를 표출. false일시 표출되지 않게된다.

타이머는 1초에 한번씩 console.log로 확인이 가능하지만 표출되지 않는다고 멈추지는 않는다.

 

useEffect 에서의 내용은 처음 화면에 표출(마운트)되면 함수가 시작되며 화면에서 사라지면(언마운트)되지만 함수는 계속 실행된다. 함수를 정지하기위해 useEffect에 return을 추가한다. useEffect안의 return은 언마운트시에 실행되기에 안에 clearInterval을 사용해 타이머를 정지 시킬 수 있다.

 

※ useEffect는 화면에 마운트되면 바로 실행 useEffect에서의 return은 언마운트시 실행