[개념 정리]useEffect

* 작성 이유

▶ React를 사용하면서 React Hooks를 제대로 설명하지 못하는 것 같아 정리
▶ 참고한 강의(별코딩)

* 정리

* useEffect

▶ 어떤 컴포넌트가 Mount(화면에 첫 렌더링) 되었을 때, Update(다시 렌더링) 될 때, Unmount(화면에서 사라질 때) 특정 작업을 처리할 코드 실행하기 위함
▶ 인자로 콜백함수(다른 함수의 인자로 전달된 함수)를 받음

useEffect(() => {//작업})

* useEffect 형태

1) useEffect(() => {
	//작업
}) -> 하나의 콜백함수만 존재, 렌더링 될 떄마다 실행됨

2) useEffect(() => {
	//작업
}, [value]) -> 하나의 콜백함수 + 배열(dependency array) -> 화면에 첫 렌더링 될 때, value값이 바뀔 때만 실행 
-> 배열이 빈 배열일 경우 화면에 첫 렌더링 될 때만 실행됨

* clean up

▶ useEffect()안에 return
▶ 해당 컴포넌트가 Unmount될 때, 다음 렌더링 시 분리, useEffect가 실행되기 이전에 함수 실행

* 예제 1

▶ name이 바뀔 때마다 useEffect 안의 "렌더링" 콘솔에 찍히기

import { useState, useEffect } from "react";

const 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("렌더링");
  }, [name]); //[count]가 들어가면 count값이 변할 때 실행

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

export default App;

* 예제 2

▶ Toggle Timer를 누르면 타이머 실행 다시 누르면 타이머 종료

[App.js]

import { useState, useEffect } 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;

[components/Timer.js]

import React, { useEffect } from "react";

const Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머");
    }, 1000);
    return () => {
      clearInterval(timer);
      console.log("타이머가 종료되었습니다.");
    };
  }, []);

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

export default Timer;