[Recat] useEffect 이해하기

useEffect는 React 컴포넌트에서 주로 사용하는 함수로, 두 개의 매개변수를 가집니다. 첫 번째는 콜백 함수이며, 두 번째는 dependencies array입니다.

다음 코드를 통해 useEffect의 기본 사용 방법을 알아보겠습니다.

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState('');

  const handleCountUpdate = () => {
    setCount(count + 1);
  }

  const handleInputChange = (e) => {
    setName(e.target.value);
  }

  // 렌더링 될 때마다 매번 콜백 함수 실행
  useEffect(() => {
    console.log('렌더링');
  });

  // 마운트 + count 변경 시에만 실행
  useEffect(() => {
    console.log('Count 변경');
  }, [count]);

  // 처음 마운트 될 때만 실행
  useEffect(() => {
    console.log('첫 마운트');
  }, []);

  return (
    <div className="App">
      <button onClick={handleCountUpdate}>Update</button>
      <span>count: {count}</span>
      <input type='text' value={name} onChange={handleInputChange}/>
      <span>name: {name}</span>
    </div>
  );
}

export default App;

📒 useEffect의 동작 결과

1. 컴포넌트 실행 시
   • 페이지가 로드되면 세 가지 useEffect 함수 안의 콜백 함수가 실행됩니다.
2. Update 버튼 클릭 시
   • count 값이 업데이트되어서, 렌더링과 Count 변경이 실행됩니다.
3. input에 텍스트 입력 시
   • name 상태가 변경되므로 렌더링만 실행됩니다.

정리

• 빈 dependencies array []: 처음 마운트될 때 한 번만 실행됩니다.
• 특정 값 포함된 dependencies array [value]: 지정된 값이 변경될 때마다 실행됩니다.
• dependencies array 없음: 매번 렌더링 시마다 실행됩니다.

Clean Up

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

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

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

export default App;

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

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

    // 컴포넌트 언마운트 시 클린업 함수 실행
    return () => {
      clearInterval(timer);
      console.log('타이머가 종료되었습니다.');
    };
  }, []);

  return <div><span>타이머를 시작합니다. 콘솔을 확인하세요!</span></div>;
}

export default Timer;

클린업 함수 동작

1. Timer 컴포넌트 마운트 시
   • 버튼 클릭으로 showTimer가 true가 되면 Timer 컴포넌트가 마운트되며 useEffect 내부 콜백 함수가 실행됩니다.
   • 타이머 돌아가는 중... 메시지가 1초마다 출력됩니다.
2. Timer 컴포넌트 언마운트 시
   • 다시 버튼을 클릭하면 showTimer가 false가 되어 Timer 컴포넌트가 언마운트됩니다.
   • 언마운트 시 클린업 함수가 실행되어 타이머가 종료되었습니다.가 출력됩니다.

클린업 함수의 필요성

useEffect의 클린업 함수가 없다면, 컴포넌트가 언마운트되더라도 타이머가 계속 실행됩니다. 이런 상황을 방지하려면 필요한 경우 useEffect의 return을 통해 클린업 함수를 지정해야 합니다.