React-useEffect

์ด์ˆ˜ํ˜„ยท2022๋…„ 5์›” 25์ผ
1

React

๋ชฉ๋ก ๋ณด๊ธฐ
4/4

๐Ÿ“šuseEffect

useEffect๊ฐ€ ๋ญ˜๊นŒ..

useEffect๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค ํŠน์ • ์ž‘์—…(side effect)๋ฅผ ์ˆ˜ํ–‰ํ•˜๋„๋ก ์„ค์ • ํ•  ์ˆ˜ ์žˆ๋Š” "Hook"์ด๋‹ค!..?

๊ทธ๋ ‡๋‹ค๋ฉด ์šฐ์„  useEffect๊ฐ€ ์–ด๋–ป๊ฒŒ ์ •์˜๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž!

  • useEffect()๋Š” effect๋ผ๋Š” ํ•„์ˆ˜ ์ธ์ž 1๊ฐœ์™€ ์˜ต์…”๋„ ์ธ์ž์ธ deps 1๊ฐœ๋ฅผ ๋ฐ›๋Š”๋‹ค๊ณ  ์ •์˜๋˜์–ด์žˆ๋‹ค.
  • effect๋Š” cleanupํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ช…๋ น ํ•จ์ˆ˜๋ผ๊ณ  ์ •์˜๋˜์–ด ์žˆ๋‹ค.
  • deps๋Š” deps์ธ์ž๊ฐ€ ์กด์žฌํ•œ๋‹ค๋ฉด, effect๋Š” deps ๋ฆฌ์ŠคํŠธ ์•ˆ์— ์žˆ๋Š” values๋“ค์ด ๋ณ€ํ•  ๋•Œ ํ™œ์„ฑํ™” ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ •์˜๋˜์–ด ์žˆ๋‹ค.

์ž.. ๊ทธ๋Ÿผ ์ด์ œ useEffect๊ฐ€ ์–ด๋–ป๊ฒŒ ์ •์˜ ๋˜์–ด์žˆ๊ณ , ๋™์ž‘ํ•˜๋Š”์ง€ ์•Œ์•˜๋‹ค.. ๊ทผ๋ฐ ์œ„์— ๋‚˜์˜จ
side effect ์™€ cleanup function์ด ๋ญ”์ง€ ๋ชจ๋ฅด๋‹ˆ๊นŒ ์ฐพ์•„๋ณด๊ณ  ๊ทธ ํ›„์— ์ง์ ‘ ์‚ฌ์šฉํ•ด๋ณด์ž!

side effect๋ž€?

์šฐ์„  ๋ฆฌ์•กํŠธ์—์„œ rendering์ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๋Š”์ง€ ์•Œ์•„์•ผํ•œ๋‹ค..

  • React์—์„œ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์˜ rendering์ด๋ž€ state, props๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ UI ์š”์†Œ๋ฅผ ๊ทธ๋ ค๋‚ด๋Š” ํ–‰์œ„์ด๋‹ค.
  • ์ฆ‰, ๋ Œ๋”๋ง์˜ ๊ฒฐ๊ณผ๋ฌผ์€ UI ์š”์†Œ, ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ํ™”๋ฉด์— JSX ๋ฌธ๋ฒ•์œผ๋กœ ๋ฌด์—‡์ด ๋‚˜ํƒ€๋‚ ์ง€๋ฅผ ์ ์–ด๋‘” ์ปดํฌ๋„ŒํŠธ๋“ค์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ Œ๋”๋ง์˜ ๊ฒฐ๊ณผ๋ฌผ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ์š”์†Œ๋Š” state์™€ props์ด๋‹ค.
  • ์ด๋ฅผ ๋‹ฌ๋ฆฌ ํ‘œํ˜„ํ•˜๋ฉด (state,props) => UI ๋ผ๊ณ ๋„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋‹ค์‹œ ๋งํ•˜๋ฉด, state,props์— ๋”ฐ๋ผ ๋‹ค๋ฅธ UI๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํ•จ์ˆ˜์™€๋„ ๊ตฌ์กฐ์ ์œผ๋กœ ๋™์ผํ•˜๋‹ค.

React๋Š” ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ค‘์‹ฌ์œผ๋กœ ํ•œ๋‹ค.

  • side effect๋Š” ์‹คํ–‰ ์ค‘์ธ ํ•จ์ˆ˜์˜ ๋ฒ”์œ„๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ๊ฒƒ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๋ชจ๋“  ์‹คํ–‰์„ ๋งํ•œ๋‹ค.
  • ์˜ˆ๋ฅผ ๋“ค์–ด, ํ•จ์ˆ˜๊ฐ€ ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น ํ•จ์ˆ˜๋Š” side effect๋ฅผ ์œ ๋ฐœํ•œ๋‹ค.
  • ์ „์—ญ ๋ณ€์ˆ˜๋Š” ํ˜„์žฌ ํ•จ์ˆ˜์˜ ๋ฒ”์œ„์— ์†ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

Side Effect ์˜ˆ์‹œ

  • ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋น„๋™๊ธฐ API ํ˜ธ์ถœ ๋งŒ๋“ค๊ธฐ
  • DOM ์š”์†Œ๋ฅผ ์ˆ˜๋™์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ
  • ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์ „์—ญ ๋ณ€์ˆ˜ ์—…๋ฐ์ดํŠธ
  • Setting a subscription to an observable(ex, setInterval)

    ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•„์š”ํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ side effect๋Š” ํ”ผํ•  ์ˆ˜ ์—†๋‹ค.
    1. ํ˜„์žฌ ์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด์ž.
    2. ์ด๊ฒƒ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ, ์ง€์ •๋œ ์‚ฌ์šฉ์ž์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด AJAX ํ˜ธ์ถœ์„ ํ•ด์•ผ ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ, ์šฐ๋ฆฌ๋Š” ํ•จ์ˆ˜์— side effect๋ฅผ ๋„์ž…ํ•˜๊ณ  ์žˆ๋‹ค.
    3. side effect๋ผ๊ณ  ํ•ด๋„, ํ•„์š”ํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋ฉด ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ํ•„์š”ํ•˜๋‹ค.

  • ์œ„ ์ž‘์—…์„ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜์—ฌ ํ…Œ์ŠคํŠธ ํ•ด๋ดค๋‹ค. ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋ณด์ž.
import axios from "axios";
import { useEffect, useState } from "react";
import "./App.css";
import EffectTest from "./EffectTest";
import PropTest from "./PropTest";
function App() {
  let [myName, setMyName] = useState("suhyeon");
  let [textColor, setTextColor] = useState("green");
  let [id, setId] = useState(1);
  let [user, setUser] = useState({});

  console.log("user", user);
  console.log("id111", id);

  useEffect(() => {
    axios
      .get(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then((res) => {
        let temp = { ...res.data };
        setUser(temp);
      });
  }, [id]);

  // console.log(user.data);
  const changeColor = (color) => {
    textColor === "green" ? setTextColor(color) : setTextColor("green");
  };

  const nextId = () => {
    console.log("prevId", id);
    if (id < 10) setId(++id);
    else if (id === 10) alert("์œ ์ € ๋ชฉ๋ก์˜ ๋์ž…๋‹ˆ๋‹ค.");
    console.log("prevId", id);
  };

  const prevId = () => {
    console.log("prevId", id);
    if (id > 1) setId(--id);
    else if (id === 1) alert("์œ ์ € ๋ชฉ๋ก์˜ ์‹œ์ž‘์ž…๋‹ˆ๋‹ค.");
    console.log("prevId", id);
  };

  return (
    <>
      <PropTest
        userInfo={[{ name: myName, age: "28" }]}
        color={textColor}
        clickEvent={changeColor}
      />
      <EffectTest
        color={textColor}
        name={myName}
        id={id}
        nextEvent={nextId}
        prevEvent={prevId}
      />
      <div>name:{user.name}</div>
      <div>username:{user.username}</div>
      <div>email:{user.email}</div>
      <div>phone:{user.phone}</div>
      <div>website:{user.website}</div>
    </>
  );
}

export default App;

------------------------------------------------------------

import { useEffect } from "react";

function EffectTest({ id, nextEvent, prevEvent }) {
  console.log("EffectTest ์ปดํฌ๋„ŒํŠธ ์‹œ์ž‘");
  useEffect(() => {
    console.log("First useEffect");
  });

  return (
    <div style={{ marginTop: 10 }}>
      <button onClick={nextEvent}>next</button>
      <button style={{ marginLeft: 15 }} onClick={prevEvent}>
        prev
      </button>
    </div>
  );
}

export default EffectTest;

์œ„ ์ฝ”๋“œ๋Š” App ์ปดํฌ๋„ŒํŠธ์— useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ, ์œ ์ € id๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ side effect๋ฅผ ์ˆ˜ํ–‰ํ•˜๋„๋ก ์ž‘์„ฑํ•˜์˜€๋‹ค.(useEffect() ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ [id] ๋ฅผ ์ „๋‹ฌํ•ด์„œ id๊ฐ€ ๋ฐ”๋€” ๋•Œ side effect๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋กœ์ง์ด๋‹ค.)

  • ์—ฌ๊ธฐ์„œ๋Š” EffectTest๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์„œ ๋ฒ„ํŠผํƒœ๊ทธ 2๊ฐœ๋ฅผ ๋ฆฌํ„ดํ•˜๊ณ  ์žˆ๋‹ค.
  • ๋ฒ„ํŠผํƒœ๊ทธ์—๋Š” props๋กœ ์ „๋‹ฌ๋ฐ›์€ nextEvent, prevEvent ํ•จ์ˆ˜๋ฅผ onClick ์ด๋ฒคํŠธ์˜ ํ•ธ๋“ค๋Ÿฌ๋กœ ์ „๋‹ฌํ•˜๊ณ  ์žˆ๋‹ค.
  • ์œ„ 2๊ฐœ์˜ ํ•จ์ˆ˜๋ฅผ ์ฐพ์•„๋ณด๋ ค๋ฉด App ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ€๋ณด์ž.
  • nextEvent, prevEventํ”„๋กœํผํ‹ฐ๋ช…์œผ๋กœ ์ „๋‹ฌ๋ฐ›์€ 2๊ฐœ์˜ ํ•จ์ˆ˜๋Š” nextId, prevId๋ผ๋Š” ํ•จ์ˆ˜์ด๋‹ค.
  • ํ•จ์ˆ˜๋“ค์€ ๋ฒ„ํŠผ์ด ํด๋ฆญํ•  ๋•Œ id ์ƒํƒœ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ์ด๋ฒคํŠธ์ด๋‹ค.
  • id๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค side effect์ž‘์—…์ด ์ˆ˜ํ–‰๋˜๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ side effect ์ž‘์—…์€ axios ๋น„๋™๊ธฐ ์ž‘์—…์„ ํ†ตํ•ด get()๋ฉ”์„œ๋“œ ์•ˆ์— ์ธ์ž๋กœ url์„ ๋„˜๊ฒจ์ฃผ๊ณ  ๊ทธ url์— ์žˆ๋Š” ์ •๋ณด๋“ค์„ ๊ฐ€์ง„(์„ฑ๊ณตํ•œ๋‹ค๋ฉด) Promise ๊ฐ์ฒด๊ฐ€ ๋ฐ˜ํ™˜๋˜๋Š”๋ฐ, then() ๋ฉ”์„œ๋“œ๋กœ Promise ๊ฐ์ฒด์—์„œ ๊ฐ’์„ ๋ฐ›์•„ temp ๋ณ€์ˆ˜์— ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋กœ ๋งŒ๋“ค์–ด์„œ user ์ƒํƒœ๊ฐ’์— ๋„ฃ์–ด์ฃผ๊ณ  ์žˆ๋‹ค.
  • ์ฆ‰, id๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น id์— ํ•ด๋‹นํ•˜๋Š” ์œ ์ €์ •๋ณด๊ฐ€ user ์ƒํƒœ๊ฐ’์— ๊ฐ์ฒด๋กœ ๋‹ด๊ธฐ๋Š” ๊ฒƒ์ด๋‹ค.
  • ๊ทธ user ์ƒํƒœ๊ฐ’์˜ ์ •๋ณด๋ฅผ JSX๋ฌธ๋ฒ• ({})์œผ๋กœ ์ถ”์ถœํ•˜์—ฌ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๋Š” ์˜ˆ์ œ์ด๋‹ค.

์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ๋ฌธ์ œ

  • nextId, prevId ํ•จ์ˆ˜์—์„œ ์ฆ๊ฐ์—ฐ์‚ฐ์ž๋ฅผ id++, id--๋กœ ์‚ฌ์šฉํ–ˆ๋”๋‹ˆ, 1๊ฐœ์”ฉ ์˜ˆ์ƒํ–ˆ๋˜ ๊ฐ’๋“ค๋ณด๋‹ค ๋ฐ€๋ ค์„œ ์ถœ๋ ฅ๋˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ–ˆ๋‹ค
    => ++id, --id๋กœ ๋ณ€๊ฒฝํ–ˆ๋”๋‹ˆ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค. ํ›„์œ„ ์—ฐ์‚ฐ์ž๋Š” ๊ฐ’์„ ํ• ๋‹นํ•œ ๋’ค 1์„ ์ฆ๊ฐ€/๊ฐ์†Œ์‹œํ‚ค๋Š” ์—ฐ์‚ฐ์ด๊ณ , ์ „์œ„ ์—ฐ์‚ฐ์ž๋Š” ๊ฐ’์— 1์„ ์ฆ๊ฐ€/๊ฐ์†Œ์‹œํ‚จ ๋’ค ํ• ๋‹นํ•˜๋Š” ์—ฐ์‚ฐ์ž์˜€๋‹ค.
    => ์ „์œ„, ํ›„์œ„ ์—ฐ์‚ฐ์ž์˜ ์ฐจ์ด๋ฅผ ์ด๋ฒˆ์— ํ™•์‹คํžˆ ๊ธฐ์–ตํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

๋งŒ์•ฝ useEffect์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ๋นˆ ๋ฐฐ์—ด(=[])์ด๋ผ๋ฉด?

์ฒซ ์œ ์ €์—์„œ ์ด์ „์œผ๋กœ ๊ฐ€๋ ค๊ณ  ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด alert์ฐฝ์ด ๋œจ๋Š” ๊ฒƒ์„ ํ†ตํ•ด id์˜ ๊ฐ’์ด ๋ฐ”๋€Œ์ง€๋งŒ []์ด ์ธ์ž๋กœ ๋“ค์–ด์™”๊ธฐ ๋•Œ๋ฌธ์— ์ฒซ ๋งˆ์šดํŠธ ๋•Œ๋งŒ side Effect๊ฐ€ ๋™์ž‘ํ•ด์„œ ๊ธฐ๋ณธ ์œ ์ € ์ •๋ณด๊ฐ€ ์ถœ๋ ฅ๋˜์ง€๋งŒ ๊ทธ ๋‹ค์Œ๋ถ€ํ„ฐ๋Š” side effect์ž‘์—…์ด ์ด๋ค„์ง€์ง€ ์•Š์•„ ์œ ์ €๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

useEffect๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ๋ฌธ์ œ

useEffect์˜ 2๋ฒˆ์งธ ์ธ์ž๋กœ ๋นˆ ๋ฐฐ์—ด๊ณผ, [id] ์ฒ˜๋Ÿผ value๋ฅผ ๋„ฃ์€ deps๋ฅผ ์ „๋‹ฌํ–ˆ์„ ๋•Œ, ๋นˆ ๋ฐฐ์—ด์€ ์ฒซ ๋งˆ์šดํŠธ๊ฐ€ ๋  ๋•Œ๋งŒ ์ž‘์—…์ด ์ด๋ค„์ง€๊ณ , value๊ฐ€ ์žˆ์œผ๋ฉด value๊ฐ€ ๋ณ€ํ•  ๋•Œ ์ž‘์—…์ด ์ด๋ค„์ง€๋Š” ๊ฒƒ ๊นŒ์ง€๋Š” ์‹ค์ œ๋กœ ํ™•์ธํ–ˆ๊ณ  ์ดํ•ด๋„ ํ–ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ... 2๋ฒˆ์งธ ์ธ์ž๋ฅผ ์•„์˜ˆ ์ „๋‹ฌํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ํ”„๋กœ๊ทธ๋žจ์ด ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋™์ž‘์„ ์ˆ˜ํ–‰ํ–ˆ๋‹ค. ์•„๋ž˜ ์บก์ณ ํ™”๋ฉด์„ ๋ณด์ž.

  • ๋ณด์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ id๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ, side effect๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ฝ˜์†”์ฐฝ์„ ๋ณด๋ฉด ๋ฆฌ๋ Œ๋”๋ง์ด ๊ณ„์† ์ด๋ค„์ง€๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ, ์ด์œ ๋ฅผ ๋ชจ๋ฅด๊ฒ ๋‹ค..
  • ๐Ÿ’ก์•„! ์ด์œ ๋ฅผ ์•Œ์•˜๋‹ค.. useEffect์˜ 2๋ฒˆ์งธ ์ธ์ž๋ฅผ ์ „๋‹ฌํ•˜์ง€ ์•Š์•„์„œ, ๋ Œ๋”๋ง์ด ๋  ๋•Œ๋งˆ๋‹ค useEffect์˜ effect๊ฐ€ ์‹คํ–‰๋˜๋Š”๋ฐ, ํ˜„์žฌ App ์ปดํฌ๋„ŒํŠธ์˜ useEffect effect๋ฅผ ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค. setUser() ๋ถ€๋ถ„์ด ๋ฌธ์ œ์˜€๋‹ค.

โ—๏ธ์ฆ‰, setUser๊ฐ€ ์ด๋ค„์ง€๋ฉด์„œ ์ƒํƒœ๊ฐ’์ด ๋ณ€๊ฒฝ๋ผ์„œ ๋ฆฌ๋ Œ๋”๋ง ๋˜๊ณ  ๋‹ค์‹œ App์ปดํฌ๋„ŒํŠธ์˜ useEffect๊ฐ€ ์‹คํ–‰๋˜๊ณ  ๋ฐ˜๋ณต๋ผ์„œ ์ด๋Ÿฐ ๊ฒƒ์ด๋‹ค. ํ™•์‹คํžˆ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜๋ฉด์„œ ์ฝ˜์†”์— ์ถœ๋ ฅํ•ด๋ณด๋‹ˆ, ํ”„๋กœ๊ทธ๋žจ์ด ์–ด๋–ค ์ˆœ์„œ๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ์ดํ•ด๊ฐ€ ๊ฐ€๊ณ  ์ง€๊ธˆ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ๋„ ์ดํ•ด๊ฐ€ ๋” ๋นจ๋ฆฌ๋˜๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๋‹คํ–‰์ด๋‹ค..

=> ๊ณ„์† ์ด๋ ‡๊ฒŒ ๊ณต๋ถ€ํ•˜์ž.. ๋” ๋งŽ์ด ์ฐพ์•„๋ณด๊ณ ..(์›๋ฆฌ๋ถ€ํ„ฐ ์•Œ๋ฉด ์ฐธ ์ข‹์€๊ฑธ... ์›๋ฆฌ๋ถ€ํ„ฐ ์•Œ์•„๊ฐ€๋Š”๊ฒŒ ์–ด๋ ค์šด ๊ฒƒ ๊ฐ™๋‹ค..)

axios
      .get(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then((res) => {
        let temp = { ...res.data };
        setUser(temp);
      });

cleanUp Function์ด๋ž€?

useEffect๋Š” ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋นŒ๋“œ๋œ๋‹ค. ๋ฐ˜ํ™˜๋˜๋Š” ํ•จ์ˆ˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฐ๊ฒฐ ํ•ด์ œ๋  ๋•Œ ์‹คํ–‰๋œ๋‹ค.(์–ธ๋งˆ์šดํŠธ)
=> ์ด๊ฒƒ์€ ๋ถˆํ•„์š”ํ•œ ๋™์ž‘์„ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋งค์šฐ ์œ ์šฉํ•˜๋‹ค.

์ˆœ์„œ : Render -> Effect Callback -> CleanUp

  • ์ฃผ์˜ํ•  ์ ์€ ๋‹จ์ˆœํžˆ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ๋˜๊ณ , ์‚ฌ๋ผ์ง€๋Š” ์‹œ์ ์—๋งŒ Cleanup Function์ด ์‹คํ–‰๋˜๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค.
  • ๋‹ค์Œ effect๊ฐ€ ์ผ์–ด๋‚˜๊ธฐ ์ „์—, ์ด์ „ effect์˜ ์˜ํ–ฅ์„ ์ •๋ฆฌํ•ด์ค˜์•ผ ํ•œ๋‹ค๋Š” ์ปจ์…‰์„ ๊ธฐ์–ตํ•˜์ž.
  • ๋‹ค์Œ ์˜ˆ์ œ๋ฅผ ๋ณด๊ณ  ์ˆœ์„œ๋ฅผ ๋งž์ถฐ๋ณด์ž..
const App = () => {
  const [count, setCount] = useState(0);

  console.log("render", count);

  useEffect(() => {
    console.log("useEffect Callback", count);

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

  return <div onClick={() => setCount(count + 1)}>ํ•˜์ž‰</div>;
};

export default App;

๋‚ด๊ฐ€ ์ฒ˜์Œ ์˜ˆ์ƒํ•œ ์ถœ๋ ฅ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ๋จผ์ €, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋  ๋•Œ render 0
  • useEffect๋Š” ๋‘ ๋ฒˆ์งธ ์ธ์ž์— deps๊ฐ€ ์žˆ์–ด๋„ ์ฒซ ๋งˆ์šดํŠธ ๋•Œ effect๊ฐ€ ์‹คํ–‰๋˜๋ฏ€๋กœ, useEffect Callback 0
    ์ด๋ ‡๊ฒŒ ๋‘ ๋‹จ๊ณ„๋ฅผ ์˜ˆ์ƒํ–ˆ๊ณ , ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ์˜ ์ถœ๋ ฅ์„ ์˜ˆ์ƒํ•œ ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
  • setCount()๋ฅผ ํ†ตํ•ด count ์ƒํƒœ๊ฐ’์— 1์ด ๋”ํ•ด์ ธ ๋ Œ๋”๋ง์ด ๋‹ค์‹œ๋ผ์„œ render 1
  • useEffect์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž์ธ deps์˜ value๊ฐ€ ๋ณ€ํ–ˆ์œผ๋ฏ€๋กœ effect ์‹คํ–‰, useEffect Callback 1
    ์ด๋ ‡๊ฒŒ ๋‘ ๋‹จ๊ณ„๋ฅผ ์˜ˆ์ƒํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‹ค์ œ ๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค
  • render 1 -> cleanUp 0 -> useEffect Callback 1... ํ .. ์™œ ์ผ๊นŒ..
  • ์•„๋งˆ๋„ ์œ„์—์„œ ๋งํ•œ ์ปจ์…‰์ด ์ด๋Ÿฐ ์ƒํ™ฉ์„ ๋งํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋‹ค์Œ effect๊ฐ€ ์ผ์–ด๋‚˜๊ธฐ ์ „์—, ์ด์ „ effect์˜ ์˜ํ–ฅ์„ ์ •๋ฆฌํ•ด์ค˜์•ผ ํ•œ๋‹ค๋Š” ์ปจ์…‰์„ ๊ธฐ์–ตํ•˜์ž.
  • ์ด์ „ effect ์˜ํ–ฅ์„ ์ •๋ฆฌํ•ด์คฌ๊ธฐ ๋•Œ๋ฌธ์— ๋ฒ„ํŠผ ํด๋ฆญ ์ „์˜ ์ƒํƒœ๊ฐ’ 0๊ณผ ํ•จ๊ป˜ ์ถœ๋ ฅ๋œ ๊ฒƒ์ด๋‹ค.
  • React Hook Flow Diagram ์‚ฌ์ง„์„ ๋ณด๋ฉฐ ํ๋ฆ„์„ ์‚ดํŽด๋ณด์ž.
  • ์—…๋ฐ์ดํŠธ ๊ณผ์ •์„ ๋ณด๋ฉด Render -> Browser paints screen -> CleanUp Effects -> Run Effects ์ˆœ์„œ์ด๋‹ค.
  • cleanup function์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง๋  ๋•Œ๋งˆ๋‹ค ์‹คํ–‰๋œ๋‹ค.
  • effect๋Š” ๊ฐ ๋ Œ๋”๋ง์— ๋Œ€ํ•ด ์‹คํ–‰๋˜๋ฏ€๋กœ React๋Š” ๋‹ค์Œ์— effect๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์ „์— ์ด์ „ ๋ Œ๋”๋ง์—์„œ ์ •๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•œ๋‹ค.

๊ฒฐ๋ก 

useEffect๋Š” React ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ์˜ ์ˆ˜๋ช…์ฃผ๊ธฐ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ๋Œ€์ฒด๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  • ์•„์ง cleanup์— ๋Œ€ํ•ด ์™„์ „ํžˆ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ด์„œ, ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•ด๋ณด๋ฉด์„œ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.
  • useEffect๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉด์„œ state๋„ ๊ฐ™์ด ๊ณต๋ถ€๊ฐ€ ๋๋‹ค...
  • ๊ฐœ๋…์— ๋Œ€ํ•œ ์ดํ•ด๋Š” ์—ญ์‹œ ์ง์ ‘ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์ถœ๋ ฅํ•ด๋ณด๋ฉด์„œ ๋” ๋นจ๋ฆฌ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค..

์ฐธ๊ณ ์ž๋ฃŒ

https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm
https://ko.reactjs.org/docs/hooks-effect.html

0๊ฐœ์˜ ๋Œ“๊ธ€