[TIL] 220125

Lee Syong·2022년 1ė›” 25ėž
0

TIL

ëŠĐ록 ëģīęļ°
160/204
post-thumbnail

📝 ė˜Ī늘 한 ęēƒ

  1. React.useEffect()

📚 ë°°ėšī ęēƒ

1. EFFECTS

1) useEffect

(1) ė―”ë“œ ė‹Ī행 ė‹œė  ëŽļė œ

ęļ°ëģļė ėœžëĄœ state가 ëģ€í•  때마ë‹Ī App ėŧī폮넌íŠļ ë‚īė˜ ëŠĻ든 ė―”ë“œę°€ 반ëģĩ ė‹Ī행된ë‹Ī.

ę·ļ럮나 App ėŧī폮넌íŠļė˜ ėžëķ€ ė―”드는 App ėŧī폮넌íŠļ가 ėē˜ėŒ 렌더링될 때만 ė‹Ī행되도록 하ęģ , ėī후ė— state가 ëģ€í•  때는 ė‹Ī행되ė§€ ė•Šë„록 할 필ėš”ę°€ ėžˆë‹Ī. ex) API í˜ļėķœ

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("call an api"); // state가 바뀔 때마ë‹Ī ė―˜ė†”ė— ė°ížŒë‹Ī
  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

(2) useEffect([ė‹Ī행하ë Ī는 ė―”ë“œ], [ė§€ėžœëģž state])

useEffect()는 2개ė˜ ėļėžëĨž 받는ë‹Ī.
ėēŦ ëēˆė§ļ ėļėžëŠ” ęļ°ëģļė ėœžëĄœ ėŧī폮넌íŠļ 렌더링 ė‹œ 한 ëēˆë§Œ ė‹Ī행될 ė―”ë“œėīë‹Ī.

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);

  console.log("항ėƒ ė‹Ī행되는 ė―”ë“œ");
  useEffect(() => console.log("call the api..."), []);

  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

두 ëēˆė§ļ ėļėžëŠ” ëģ€í™”ëĨž ė§€ėžœëģž stateëĨž ė•„ėī템ėœžëĄœ 가ė§€ëŠ” ë°°ė—īė„ 받는ë‹Ī.
React가 í•īë‹đ stateëĨž ė§€ėžœëģīë‹Ī가 ę·ļ state가 ëģ€ęē―됐ė„ 때ė—ë„ ėēŦ ëēˆė§ļ ėļėžëĄœ 받ė€ ė―”ë“œëĨž ė‹Ī행한ë‹Ī.

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  console.log("항ėƒ ė‹Ī행되는 ė―”ë“œ"); // 항ėƒ ė‹Ī행
  useEffect(() => console.log("API í˜ļėķœ..."), []); // ėŧī폮넌íŠļ ėē˜ėŒ 렌더링 ė‹œ 한 ëēˆë§Œ ė‹Ī행
  useEffect(() => console.log(keyword, "ęē€ėƒ‰"), [keyword]); // 〃 + keword state ëģ€ęē―될 때마ë‹Ī ė‹Ī행

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="ė—Žęļ°ė„œ ęē€ėƒ‰..."
      />
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>íīëĶ­</button>
    </div>
  );
}

export default App;

ë‹Ī만 현ėžŽëŠ” inputė— keywordëĨž ėž…ë Ĩ하ė§€ ė•Šė•„도 ėŧī폮넌íŠļ가 ėē˜ėŒ 렌더링될 때 ëŽīėĄ°ęąī ęē€ėƒ‰ė„ 하ęļ° 때ëŽļė— keyword가 ėž…ë Ĩ됐ė„ 때만 ęē€ėƒ‰í•˜ë„록 ėˆ˜ė •í–ˆë‹Ī.

useEffect(() => {
  if (keyword !== "" && keyword.length > 5) {
    console.log(keyword, "ęē€ėƒ‰");
  }
}, [keyword]);

ðŸ’Ą useEffect() VS memo()

  • useEffect() : 동ėž ėŧī폮넌íŠļė—ė„œ state가 ëģ€í–ˆė„ 때 ėžëķ€ ė―”ë“œę°€ ė‹Ī행되ė§€ ė•Šë„록 한ë‹Ī.
  • memo() : ëķ€ëŠĻ ėŧī폮넌íŠļė—ė„œ state가 ëģ€í–ˆė„ 때 ę·ļęēƒėī ėžė‹ ėŧī폮넌íŠļė˜ propęģž ė—°ęē°ë˜ė–ī ėžˆė§€ ė•ŠėœžëĐī ëķ€ëŠĻ ėŧī폮넌íŠļė˜ state가 ëģ€í•ī도 ėžė‹ ėŧī폮넌íŠļ는 ëĶŽë Œë”링 되ė§€ ė•Šë„록 한ë‹Ī.

(3) cleanup function

ë‹ĪėŒ ė―”ë“œė— 따ëĨīëĐī, ëē„튞ė„ 누ëĨž 때마ë‹Ī showingė˜ 값ėī ëģ€í•˜ëĐīė„œ Hello ėŧī폮넌íŠļ가 ėžŽėƒė„ąëœë‹Ī.
따띾ė„œ, ę·ļ때마ë‹Ī(ėĶ‰, showingė˜ 값ėī true가 될 때마ë‹Ī) Hello ėŧī폮넌íŠļė˜ useEffect() ė•ˆė˜ ė―”ë“œę°€ ė‹Ī행된ë‹Ī.

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => console.log("Hello ėŧī폮넌íŠļ ëĶŽë Œë”링"));
  return <h1>ė•ˆë…•</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);

  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

ę·ļ런데 ėŧī폮넌íŠļ가 ėƒė„ąë  때ëŋ ė•„니띞 파ęīī될 때도 íŠđė • ė―”ë“œëĨž ė‹Ī행하도록 할 ėˆ˜ ėžˆë‹Ī.
ėīëĨž ėœ„í•ī useEffectė— ė˜í•ī ė‹Ī행될 í•Ļėˆ˜(ė―œë°ą í•Ļėˆ˜)가 cleanup functionė„ return 하도록 í•īė•ž 한ë‹Ī.
cleanup functionėī란 ėŧī폮넌íŠļ가 파ęīī될 때 ė‹Ī행될 ė―”ë“œëĨž ë‹īė€ í•Ļėˆ˜ëĨž 말한ë‹Ī.

function Hello() {
  // cleanup function(ėŧī폮넌íŠļ가 파ęīī될 때 ė‹Ī행될 ė―”ë“œëĨž ë‹īė€ í•Ļėˆ˜)
  const byFn = () => console.log("ėŧī폮넌íŠļ 파ęīī");

  // useEffectė— ė˜í•ī ė‹Ī행될 í•Ļėˆ˜(ė―œë°ą í•Ļėˆ˜)
  const hiFn = () => {
    console.log("ėŧī폮넌íŠļ ėƒė„ą");
    return byFn;
  };

  useEffect(hiFn, []);

  return <h1>ė•ˆë…•</h1>;
}

한íŽļ, ėœ„ ė―”ë“œę°€ ėīí•ī하ęļ°ëŠ” ė‰―ė§€ë§Œ ëģīí†ĩė€ 따로 í•Ļėˆ˜ëĨž ëđžė§€ ė•Šęģ  useEffect() ė•ˆė— ëŠĻ든 ė―”ë“œëĨž ėž‘ė„ąí•œë‹Ī.

function Hello() {
  useEffect(() => {
    console.log("ėŧī폮넌íŠļ ėžŽėƒė„ą");
    return () => console.log("ėŧī폮넌íŠļ 파ęīī");
  }, []);

  return <h1>ė•ˆë…•</h1>;
}

ðŸ’Ą useEffect()ëĨž ė‚ŽėšĐ하ëĐī ėŧī폮넌íŠļ가 ėƒė„ąë  때, state가 ëģ€í™”í•  때, ėŧī폮넌íŠļ가 파ęīī될 때 ëŠĻ두 íŠđė • ė―”ë“œëĨž ė‹Ī행할 ėˆ˜ ėžˆë‹Ī. ėĶ‰, íŠđė • ė―”ë“œė˜ ė‹Ī행 ė‹œė ė„ ė„Īė •í•  ėˆ˜ ėžˆë‹Ī.


âœĻ ë‚īėž 할 ęēƒ

  1. PRACTICE MOVIE APP
profile
ëŠĨ동ė ėœžëĄœ ė‚īėž, 행ëģĩ하ęēŒðŸ˜

0개ė˜ 댓ęļ€