useEffect를 더 공부해보자

index.jsx

import { useEffect, useState } from "react";
import Timer from "../../src/timer";

export default function useEffectPracticePage() {
  const [input, setInput] = useState("");
  const [timerValid, setTimerValid] = useState(false);

  useEffect(() => {
    //  컴포넌트가 렌더링 될 때마다, 실행
    console.log("컴포넌트가 렌더링 될 때마다, 실행");
  });

  useEffect(() => {
    // 컴포넌트가 마운트 될 때 === 첫 화면에 렌더링 될 때, 실행 (최초만)
    console.log(
      "컴포넌트가 마운트 될 때 === 첫 화면에 렌더링 될 때, 실행 (최초만)"
    );
  }, []);

  useEffect(() => {
    // 컴포넌트가 마운트 될 때, 배열안의 value의 값이 바뀔 때 마다 실행
    console.log(
      "컴포넌트가 마운트 될 때, 배열안의 value의 값이 바뀔 때 마다 실행"
    );
  }, [input]);

  const onChangeInput = (e) => [setInput(e.target.value)];

  return (
    <div>
      <div>인풋의 값: {input}</div>
      <input type={"text"} value={input} onChange={onChangeInput} />
      <br />
      {timerValid && <Timer />}
      <button onClick={() => setTimerValid(!timerValid)}>타이머 열/닫기</button>
    </div>
  );
}

timer.js

import { useEffect } from "react";

export default function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머가 실행중입니다!");
    }, 1000);

    /* 최초에 interval 함수를 useEffect로 불러왔기 때문에,
      타이머를 닫아도 콘솔에 타이머가 작동하는 것을 볼 수 있다.
      따라서 clearInterval 함수로 타이머를 종료해주는 함수를 써야한다.
    */
    return () => {
      clearInterval(timer);
      console.log("타이머 종료");
    };
  }, []);

  return <div>타이머입니다 콘솔창을 확인하세요</div>;
}