๐Ÿ”ซ React_05 useEffect

qhflrnfl4324ยท2022๋…„ 5์›” 5์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
5/5
post-thumbnail

๐ŸŽฎ useEffect

์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ๋์„ ๋•Œ(์ฒ˜์Œ ๋‚˜ํƒ€๋‚ฌ์„ ๋•Œ), ์–ธ๋งˆ์šดํŠธ ๋์„ ๋•Œ(์‚ฌ๋ผ์งˆ ๋•Œ), ๊ทธ๋ฆฌ๊ณ  ์—…๋ฐ์ดํŠธ ๋  ๋•Œ(ํŠน์ • props๊ฐ€ ๋ฐ”๋€” ๋•Œ) ํŠน์ • ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ

๐ŸŽฒ ๋งˆ์šดํŠธ / ์–ธ๋งˆ์šดํŠธ

// UserList.js
import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    // ๋งˆ์šดํŠธ : ์ฒ˜์Œ ๋‚˜ํƒ€๋‚ฌ์„ ๋•Œ
    console.log("์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚จ");

    return () => {
      // ์–ธ๋งˆ์šดํŠธ : ์‚ฌ๋ผ์งˆ ๋•Œ
      console.log("์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง");
    };
  }, []);

  ...
}

useEffect(ํ•จ์ˆ˜, ์˜์กด๊ฐ’์ด ๋“ค์–ด์žˆ๋Š” ๋ฐฐ์—ด(deps))

  • ์ฒซ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ : ํ•จ์ˆ˜
  • ๋‘ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ : ์˜์กด๊ฐ’์ด ๋“ค์–ด์žˆ๋Š” ๋ฐฐ์—ด(deps)
    • deps ๋ฐฐ์—ด์ด ๋น„์–ด์žˆ๋‹ค๋ฉด, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ ๋‚˜ํƒ€๋‚  ๋•Œ์—๋งŒ useEffect์— ๋“ฑ๋กํ•œ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ

cleanup ํ•จ์ˆ˜

  • useEffect ์•ˆ์—์„œ returnํ•  ๋•Œ ์‹คํ–‰
  • useEffect์— ๋Œ€ํ•œ ๋’ท์ •๋ฆฌ๋ฅผ ํ•ด์ค€๋‹ค.
  • deps๊ฐ€ ๋น„์–ด์žˆ๋Š” ๊ฒฝ์šฐ, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ๋ผ์งˆ ๋•Œ cleanup ํ•จ์ˆ˜ ํ˜ธ์ถœ

deps ๋ฐฐ์—ด์ด ๋น„์–ด์žˆ๋Š” ์ƒํƒœ

  • ์ปดํฌ๋„ŒํŠธ 3๊ฐœ๊ฐ€ ๋‚˜ํƒ€๋‚˜ ์žˆ์œผ๋ฏ€๋กœ "์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚จ"์ด ์ฝ˜์†”์— 3๋ฒˆ ์ฐํžŒ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‚˜ํƒ€๋‚  ๋•Œ "์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚จ"์ด ์ฝ˜์†”์— ์ฐํžŒ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ๋ผ์งˆ ๋•Œ cleanup ํ•จ์ˆ˜ ํ˜ธ์ถœ๋˜์–ด "์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง"์ด ์ฝ˜์†”์— ์ฐํžŒ๋‹ค.

๋งˆ์šดํŠธ ์‹œ ํ•˜๋Š” ์ž‘์—…๋“ค

  • props๋กœ ๋ฐ›์€ ๊ฐ’์„ ์ปดํฌ๋„ŒํŠธ์˜ ๋กœ์ปฌ ์ƒํƒœ๋กœ ์„ค์ •
  • ์™ธ๋ถ€ API ์š”์ฒญ(REST API ๋“ฑ)
  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ (D3, Video.js ๋“ฑ)
  • setInterval์„ ํ†ตํ•œ ๋ฐ˜๋ณต์ž‘์—… ๋˜๋Š” setTimeout์„ ํ†ตํ•œ ์ž‘์—… ์˜ˆ์•ฝ

์–ธ๋งˆ์šดํŠธ ์‹œ ํ•˜๋Š” ์ž‘์—…๋“ค

  • setInterval, setTimeout์„ ์‚ฌ์šฉํ•˜์—ฌ ๋“ฑ๋กํ•œ ์ž‘์—…์„ clear (clearInterval, clearTimeout)
  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ธ์Šคํ„ด์Šค ์ œ๊ฑฐ

๐ŸŽฒ deps์— ํŠน์ • ๊ฐ’ ๋„ฃ๊ธฐ

  • deps์— ํŠน์ • ๊ฐ’์„ ๋„ฃ์œผ๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ ๋งˆ์šดํŠธ ๋  ๋•Œ, ํŠน์ • ๊ฐ’์ด ๋ฐ”๋€” ๋•Œ ํ˜ธ์ถœ๋œ๋‹ค.
  • ์–ธ๋งˆ์šดํŠธ ๋  ๋•Œ, ๊ฐ’์ด ๋ฐ”๋€Œ๊ธฐ ์ง์ „์—๋„ ํ˜ธ์ถœ๋œ๋‹ค.
// UserList.js
import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user ๊ฐ’์ด ์„ค์ •๋จ');
    console.log(user);
    return () => {
      console.log('user๊ฐ€ ๋ฐ”๋€Œ๊ธฐ ์ „..');
      console.log(user);
    };
  }, [user]);

  ...
}

  • useEffect ์•ˆ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ƒํƒœ๋‚˜ props๊ฐ€ ์žˆ๋‹ค๋ฉด, useEffect์˜ deps์— ๋„ฃ์–ด์ค˜์•ผ ํ•œ๋‹ค.
    โ‡’ useEffect ๊ทœ์น™
  • ์‚ฌ์šฉํ•˜๋Š” ์ƒํƒœ๋‚˜ props๋ฅผ deps์— ๋„ฃ์ง€ ์•Š๋Š”๋‹ค๋ฉด, useEffect์— ๋“ฑ๋กํ•œ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์ตœ์‹  ์ƒํƒœ/props๋ฅผ ๊ฐ€๋ฅดํ‚ค์ง€ ์•Š๋Š”๋‹ค.

๐ŸŽฒ deps ํŒŒ๋ผ๋ฏธํ„ฐ ์ƒ๋žตํ•˜๊ธฐ

  • deps๋ฅผ ์ƒ๋žตํ•œ๋‹ค๋ฉด, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค ํ˜ธ์ถœ
// UserList.js
import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log(user);
  });

  ...
}

  • ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋ฉด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋„ ๋ฆฌ๋ Œ๋”๋ง์ด ๋œ๋‹ค.
  • ์‹ค์ œ DOM์— ๋ณ€ํ™”๊ฐ€ ๋ฐ˜์˜๋˜๋Š” ๊ฒƒ์€ ๋ฐ”๋€ ๋‚ด์šฉ์ด ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ์—๋งŒ ํ•ด๋‹นํ•˜์ง€๋งŒ Virtual DOM์—๋Š” ๋ชจ๋“  ๊ฑธ ๋‹ค ๋ Œ๋”๋งํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ
    โ‡’ ์ตœ์ ํ™”๊ฐ€ ํ•„์š”

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