❓useEffect

어떤 컴포넌트가 Mount, Update, Unmount 와 같은 상황에서 동작하는 작업을 명시하는 함수

기본구문

useEffect(()=>{});
useEffect(()=>{},[values]);

위 처럼 두가지 유형(인자값)이 존재합니다.
1. 콜백함수
2. 콜백함수 , 배열

콜백함수만 존재하는 1번 유형의 경우, 컴포넌트가 렌더링 될 때마다 useEffect가 실행됩니다.


배열이 추가로 들어있는 2번 유형의 경우, 배열안의 요소값이 변경될 경우에만 useEffect가 실행됩니다. (배열이 빈 경우, 처음 렌더링 될 때만 실행)

Timer 예제

useEffect() 기능을 이용하여, 버튼을 누르면 타이머가 시작되는 기능을 구현하려합니다.
코드는 아래와 같이 사용합니다.

<!-- components/Timer.js -->
import React, {useEffect} from 'react';

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

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

export default Timer;

<!-- app.js -->
import React, { useState } from 'react';
import Timer from './components/Timer';


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


  return (
   <div>
    
    {showTimer&&<Timer/>}
    <button onClick={()=>{setShowTimer(!showTimer)}}>Toggle Timer</button>
   </div> 
  )
}

export default App;

위 코드를 살펴보면, Timer 컴포넌트를 실행시 useEffect가 바로 수행되어 1초마다 "타이머 돌아가는 중..." 이라는 문자열을 콘솔로 출력하게 됩니다.

위 스크린샷과 같이 toggle 버튼을 눌러서 1초마다 콘솔창에 출력함을 알 수 있으나,,

다시 위 스크린샷의 경우를 보면, 토글키를 다시한번 눌러주었음에도, 1초마다 계속 출력되고 있는 상황임을 볼 수 있습니다.
이는 useEffect() 함수 사용시, return값을 통해 Unmount 되었을 때 수행할 작업을 명시해주어 해결할 수 있습니다.

<!-- components/Timer.js-->
<!-- 중략 -->
useEffect(()=>{
        const timer = setInterval(()=>{
            console.log('타이머 돌아가는 중...');
        },1000);

        return ()=>{
            clearInterval(timer);
            console.log('타이머가 종료되었습니다.');
        }
    },[]);    
<!-- 중략 -->

위 처럼 return 값에 timer 변수의 인터벌을 종료하는 작업을 추가해주었습니다.

다시 한번 토글키를 누름으로써 타이머를 종료했음을 알 수 있습니다.

위 포스트는 https://youtu.be/kyodvzc5GHU
별코딩 님의 유튜브 강의를 기반으로 작성하였습니다.