useEffect 복습

첫번째 인자인 콜백함수만 들어가면 ?

1/ 컴포넌트가 첫 렌더링 될때 useEffect의 콜백함수가 실행

2/ 화면 안의 모든 컴포넌트들이 변경될때마다 useEffect의 콜백함수가 실행됨

 

useEffect(() => {
    console.log('hi Effect')
  })

 

두번째 인자로 배열이 들어간다면?  (dependency array)

1/ 컴포넌트가 첫 렌더링 될때 useEffect의 콜백함수가 실행

2/ 배열안에는 상태나 props가 들어가는데, 이 특정값이 업데이트 될 때마다 useEffect의 콜백함수가 실행됨

마치 componentDidUpdate와 유사하다.

 

const [count, setCount] = useState(0);
const [input, setInput] = useState('');

  useEffect(() => {
    console.log('count값이 바뀔때만 출력')
  }, [count])

  useEffect(() => {
    console.log('input값이 바뀔때만 출력')
  }, [input])

 

두번째 인자인 배열이 빈 배열이면?

1/ 컴포넌트 첫 마운트 시에만 콜백함수가 실행된다. 

마치 클래스 컴포넌트의 componentDidMount와 같다.

 

  useEffect(() => {
    console.log('첫 렌더시에만 출력')
  }, [])

 

useEffect의 clean up 함수?

 

첫 렌더시 1초마다 콘솔이 찍히는 타이머를 만들고

Timer.jsx 컴포넌트

import { useEffect } from "react"

const Timer = () => {

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('타이머 돌아가는중')
    }, 1000)
  }, [])

  return (
    <div>
      <span>타이머 시작! 콘솔창확인</span>
    </div>
  )
}

export default Timer

 

버튼 클릭 시 setShowTimer로 상태 변경을 해주어서 화면상에서 Timer 컴포넌트가 사라지게끔 만들었다.

 

import Timer from './Components/Effect/Effect_clean';

const App = () => {
  const [showTimer, setShowTimer] = useState(false)
  return (
    <div>
      {showTimer && <Timer />}
      <button onClick={() => setShowTimer(!showTimer)}>toggle timer</button>
    </div>
    )
}

 

그런데, 첫 렌더시에 출력될뿐만 아니라, 컴포넌트가 사라졌음에도 불구하고 useEffect 내부의 함수는 계속해서 동작했다. 

타이머를 다 쓰고 나서 정리를 해줘야하는데 정리를 해주지않은 상태에서 컴포넌트가 unmount 되었기 때문에,

컴포넌트는 사라졌어도 타이머는 계속해서 콘솔창에 찍히는 것이다. 

 

이 때 정리를 해주려면 useEffect 콜백 함수 내부에 return ()=> {} 종료 함수를 만들어줘야한다.

마치 componentWillUnmount와 같다.

 

즉, 컴포넌트가 unmount될때 정리하거나 unscribe 해야할 게 있다면, useEffect의 return 값으로 전달해야한다.

 

const Timer = () => {

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

    return () => {
      clearInterval(timer);
      console.log('타이머 종료됨')
    }
  }, [])

  return (
    <div>
      <span>타이머 시작! 콘솔창확인</span>
    </div>
  )
}

export default Timer