useEffect 기본

• React 컴포넌트가 랜더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

import { useState, useEffect } from 'react';

const App = () => {
  const [count, setCount] = useState(1);
  const [name, setName] = useState('');
  const handleCountUpdate = () => {
    setCount(count + 1);
  };

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

  // 랜더링 될때마다 매번 실행
  useEffect(() => {
    console.log("랜더링");
  });
  
  // 최초 랜더링과 count 값이 바뀔때만 호출되어 실행
  useEffect(() => {
    console.log("count 변화");
  }, [count]);
  
  // 최초 랜더링과 name 값이 바뀔때만 호출되어 실행
  useEffect(() => {
    console.log("name 변화");
  }, [name]);

  // 최초 랜더링 때만 호출되어 실행
  useEffect(() => {
    console.log("최초");
  }, []);

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

export default App;

useEffect 정리(clean-up) 함수

import { useEffect } from "react";

const Timer = (props) => {
    // 최초 랜더링에만 호출됨
    useEffect(() => {
        const timer = setInterval(() => {
            console.log("타이머 실행중");
        }, 1000);

        // 정리 작업, Timer 컴포넌트가 언마운트 될 때 호출됨
        return () => {
            clearInterval(timer);
            console.log("타이머 종료");
        }
    },[]);

    return (
        <div>
            <span>타이머 시작</span>
        </div>
    )
}

export default Timer;

import { useState } from 'react';
import Timer from './Component/Timer';

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

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

export default App;