useEffect

useEffect(()=>{원하는작업})

1. 인자로 하나의 콜백함수

useEffect(()=>{원하는작업})

• 렌더링될때마다 매번 콜백함수가 실행됨

2. 첫번째 인자로는 콜백함수, 두번째 인자로는 배열(dependency array)

useEffect(()=>{원하는작업}, [value])

• 만약 빈 배열을 전달해준다면 화면에 첫 렌더링 될 때만 실행됨
• 그게 아니면 value값이 바뀔때 실행됨

const [count, setCount] = useState(0);
  // 렌더링될때마다 매번 실행됨
  useEffect(() => {
    console.log("count 변화");
  }, **[count]**);

• 이렇게 되면 count값이 변경될때만 useEffect가 실행된다!
• 이게 바로 dependency array

Clean Up : 정리

useEffect(()=>{
	// 구독...
	return () => {
	// 구독해제...
	}
}, [])

• 정리작업을 해제할 때는 useEffect의 return 값에 콜백함수로 넘겨주면 된다
• 그러면 Unmount될때 혹은 그 다음 useEffect가 실행되기 전에 해제가 된다

Timer.jsx

import { useEffect } from "react";

const Timer = () => {
  useEffect(() => {
    // 타이머 컴포넌트가 처음 화면에 렌더링될때
    const timer = setInterval(() => {
      console.log("타이머 돌아가는중");
    }, 1000);

    // 타이머함수 정리작업
    return () => {
      clearInterval(timer);
      console.log("timer end");
    };
  }, []);
  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보세요</span>
    </div>
  );
};

export default Timer;

App.jsx

import { useState, useEffect } from "react";
import Timer from "./components/Timer";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  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]);

  // name이 변화될때마다 실행됨
  useEffect(() => {
    console.log("name 변화");
  }, [name]);

  // 처음 마운팅됐을 때만 실행됨
  useEffect(() => {
    console.log("처음 마운팅");
  }, []);

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

  return (
    <>
      <button onClick={handleCountUpdate}>Update</button>
      <div>count:{count}</div>
      <input type="text" value={name} onChange={handleInputChange}></input>
      <div>{name}</div>
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
      {showTimer && <Timer />}
    </>
  );
}

export default App;