| React | Hook의 useEffect의 Clean up "정리하기"

useEffect의 Clean up?

: useEffect 안에서 리턴할 수 있는 함수로, 컴포넌트가 언마운트 되기 전에 코드를 청소하는 것이다.

 

# 실습:  계속 돌아가는 타이머 멈추기 

결과 화면

콘솔화면

 

App.jsx

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

function App() {
  const [showTimer, setShowTimer] = useState(false);
  return (
    // 트루 일때만 보이게 하기
    <div className="App">
      {showTimer && <Timer />}
      <button onClick={() => setShowTimer(!showTimer)}>Toogle Timer</button>
    </div>
  );
}

export default App;

src>components>Timer.js

import React, { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머가 돌아가는중");
    }, 1000);

// clean up 정리 작업 : 타이머가 실행되지 않을땐 멈추게!!
    return () => {
      clearInterval(timer);
      console.log("타이머가 종료되었습니다.");
    };
  }, []);

  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보시오</span>
    </div>
  );
}

export default Timer;

---

 

 useEffect(() => {
 
 	 (어쩌구)
     
// clean up 정리 작업 : 타이머가 실행되지 않을땐 멈추게!!
    return () => {
      clearInterval(timer);
      console.log("타이머가 종료되었습니다.");
    };
  }, []);

 

⭐️ useEffect 안에 아래에 return함수가 clean up 정리 작업이다.

Timer 컴포넌트가 언마운트(UnMount) 화면에서 사라질때 Timer 를 끝내주는 것이다.  

(clearInterval(timer); 는 타이머를 다 쓰고나서 종료하는 것을 의미한다.) 

 

useEffect 아래에 두번째 인자값으로 의존성배열이 [ ] 빈 배열을 갖기때문에 

Timer 컴포넌트가 맨 처음 렌더링됐을때만 불리게 된다. 

---

👉 그럼 clean up 작업을 안해주면 어떻게 될까?

만약 저 return 정리작업을 주석처리를 하게되면,

타이머 버튼을 종료해도 새로고침 하지않는 이상 안멈추고 계속 돌아간다... 

 

 

참고

유튜브(별코딩 훅 시리즈)