useEffect 알아보기

1. useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.

useEffect는 컴포넌트가 mount(화면에 첫 렌더링),update(다시 렌더링),unmount(화면에서 사라질때) 됐을때,

특정 작업을 처리할 수 있다.

 

2.useEffect 사용 예제 1

import React, { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

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

  //렌더링마다 매번 실행됨 - 렌더링 이후
  useEffect(() => {
    console.log("렌더링");
  });

  //처음 화면이 렌더링 될때만 실행
  useEffect(() => {
    console.log("렌더링");
  },[]);

  // 마운팅 + count가 변화할때마다 실행됨
  useEffect(() => {
    console.log("count가 변할때 마다 실행");
  }, [count]);

  //마운팅 + name이 변경될때마다 실행됨
  useEffect(() => {
    console.log("count가 변할때 마다 실행");
  }, [name]);

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

export default App;

2.useEffect 사용 예제 2

App.jsx

import logo from './logo.svg';
import './App.css';
import Timer from './components/Timer';
import { useState } from 'react';

function App() {
  const [toggle,setToggle] = useState(false)
  return (
    <div>
      {toggle && <Timer/>}
      <button onClick={()=>setToggle(!toggle)}>Toggle Timer</button>
    </div>
  );
}

export default App;

 

Timer.jsx

import React, { useEffect } from "react";

const Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 돌아가는중...");
    }, 1000);
    return () => { //클린업 함수를 생성해야 콘솔의 타이머가 멈춤
        clearInterval(timer);
        console.log('타이머가 종료되었습니다.')
    }
  }, []);
  return <div>타이머 시작</div>;
};

export default Timer;

 

 

3.useEffect 실행순서

 

(1) useEffect는 기본적으로 mount 이후에 이루어진다. 

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

function App() {

  console.log('렌더링1')

  useEffect(()=>{
    console.log("useEffect")
  },[])

  console.log('렌더링2')

  return (
    <></>
  );
}

export default App;

 

(2) 처음 컴포넌트 렌더링시 클린업 함수는 실행되지 않는다.

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

function App() {
  const [count, setCount] = useState(0);

  console.log("렌더링1");

  useEffect(() => {
    console.log("mount");
    return () => {
      console.log("unmount");
    };
  }, []);

  console.log("렌더링2");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>숫자증가</button>
      <span>Count : {count}</span>
    </div>
  );
}

export default App;

 

(3) 클린업 함수는 state값의 변화로 인한 리렌더링 이후, useEffect의 mount가 되기 전 그 사이에 실행된다.

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

function App() {
  const [count, setCount] = useState(0);

  console.log("렌더링1");

  useEffect(() => {
    console.log("mount");
    return () => {
      console.log("unmount");
    };
  }, [count]);

  console.log("렌더링2");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>숫자증가</button>
      <span>Count : {count}</span>
    </div>
  );
}

export default App;