useEffect 를 이용한 1초마다 카운트가 증가하는 코드

우선 useEffect를 쓰지 않고 setInterval을 한 코드는 아래와 같다. 

import "./App.css";
import {useState, useRef, useEffect} from "react";
function App(){
const [count, setCount] = useState(0);

    setInterval(()=>{
      setCount(count+1)
    },1000)

  return(
    <>
    <div>{count}</div>
    </>
  )
}
export default App;

실행시켜보면 난리가 난다. 

 

second가 매번 새롭게 실행이 되기 때문이다. 

첫번째 실행된 second는 1 2 3 4 나오고 

또 두번째 실행된 second는 1 2 3 4 또 쌓이고 쌓이고 쌓이다보니까 

점점 늘어나면서 쌓이게 된다. 

 

그래서 useEffect를 사용해야 한다. 

useEffect(()=>{

},[]);

첫번째로 콜백함수를 넣어준다(마운트 이후 실행되는 부분)

두번째로 배열을 넣어준다. deps라고 부름. 

useEffect안에 들어가는 의존적인 변수가 있으면 넣어주면 된다. 지금은 second를 넣어주어야 한다. 

 

그래서 useEffect를 써주겠다. 

import "./App.css";
import {useState, useRef, useEffect} from "react";
function App(){
const [count, setCount] = useState(0);

useEffect(()=>{
    setInterval(()=>{
      setCount(count+1)
    },1000)
  },[count])

  return(
    <>
    <div>{count}</div>
    </>
  )
}
export default App;

분명 잘되어야 하는데 이것도 뭔가 이상하다. 

똑같이 버그가 나온다. 

 

아까랑 똑같이 진행된다. 

그래서 useEffect에서 return한다음에 클린업을 진행해주어야 한다. 

즉, 언마운트에 실행이 되도록 해야한다. 

 

마운트된게 내려가면 실행되도록 하는 것이다. 

클린업해주는 코드 : 

import "./App.css";
import {useState, useRef, useEffect} from "react";
function App(){
const [count, setCount] = useState(0);

useEffect(()=>{
    let interval = setInterval(()=>{
      setCount(count+1)
    },1000);
    return () => {
      clearInterval(interval);
    }
  },[count])

  return(
    <>
    <div>{count}</div>
    </>
  )
}
export default App;

정말로 마운트 될때 올라가는지 보자. 

import "./App.css";
import {useState, useRef, useEffect} from "react";
function App(){
const [count, setCount] = useState(0);

useEffect(()=>{
    console.log('마운트')
    let interval = setInterval(()=>{
      setCount(count+1)
    },1000);
    return () => {
      console.log('언마운트')
      clearInterval(interval);
    }
  },[count])

  return(
    <>
    <div>{count}</div>
    </>
  )
}
export default App;

이렇게 나옴. 

모든 컴포넌트의 생명 주기가 있다. 

마운트 때 살고 언마운트때 죽는 것이다.