๐Ÿ™„ React Hook flow(useState, useEffect)

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

You might be wondering: why is useState not named createState instead?

โ€œCreateโ€ wouldnโ€™t be quite accurate because the state is only created the first time our component renders. During the next renders, useState gives us the current state.

์ถœ์ฒ˜: React docs, Using the state hook

ํ˜„์žฌ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” useState ํ›…๊ณผ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” useEffect ํ›…์€ ํ”ํžˆ ์‚ฌ์šฉํ•œ๋‹ค.

์ด๋Ÿฐ ํ›…๋“ค์€ ์–ด๋–ค ํ๋ฆ„์œผ๋กœ ๋™์ž‘ํ• ๊นŒ? ์ด๋ฒˆ ํฌ์ŠคํŠธ์—์„œ ๊ทธ ๋ถ€๋ถ„์— ๋Œ€ํ•ด ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

๐Ÿ’Š ์‹คํ—˜

function App() {
  console.log("App render start");
  const [show, setShow] = useState(() => {
    console.log("App use State hook");
    return true;
  });

  useEffect(() => {
    console.log("App use effect hook");

    return () => {
      console.log("App useEffect Clean Up");
    };
  }, []);
  useEffect(() => {
    console.log("App use effect hook, dep [show]");

    return () => {
      console.log("App useEffect Clean Up, dep [show]");
    };
  }, [show]);

  function handleClick() {
    setShow((prev) => !prev);
  }

  console.log("App render end");
  return (
    <>
      <button onClick={handleClick}>Search</button>
      {show && <Child />}
    </>
  );
}
function Child() {
  console.log("   Child render start");
  const [text, setText] = useState(() => {
    console.log("   Child use state hook");

    return "";
  });

  useEffect(() => {
    console.log("   Child use effect hook");

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

  useEffect(() => {
    console.log("   Child use effect hook, dep [text]");

    return () => {
      console.log("   Child useEffect CleanUp, dep [text]");
    };
  }, [text]);

  function handleChange(e) {
    setText(e.target.value);
  }

  const element = (
    <>
      <input onChange={handleChange} id='input' />
      <p>{text}</p>
    </>
  );

  console.log("   Child render end");
  return element;
}

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‘ ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹ค. App ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ Child ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ํ˜•์‹์ด๋‹ค.

๊ฐ๊ฐ์˜ hook์ด ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค ์ฝ˜์†” ์ถœ๋ ฅ์„ ํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ์ถœ๋ ฅ์ด ๋‚˜์˜ฌ์ง€ ํ™•์ธํ•ด๋ณด์ž.

์ฐธ๊ณ ๋กœ ํ…Œ์ŠคํŠธ๋Š” React.StrictMode๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š๊ณ  ์ง„ํ–‰๋๋‹ค.

๐Ÿ’Œ ์ฒซ ๋ Œ๋”๋ง

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ถœ๋ ฅ๊ณผ ๋ Œ๋”๋ง ๊ฒฐ๊ณผ๊ฐ€ ๋ณด์ธ๋‹ค. ์ฃผ์˜ ๊นŠ๊ฒŒ ๋ณด์•„์•ผ ํ•  ์‚ฌํ•ญ์€ ๋ Œ๋”๊ฐ€ ๋๋‚˜๊ณ  effect ํ›…์ด ํ˜ธ์ถœ๋๋‹ค๋Š” ์ ์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  App ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ Child์˜ ๋ Œ๋”, ์ดํŽ™ํŠธ ์„ค์ •์ด ๋๋‚˜๊ณ  ๋‚˜์„œ์•ผ App ์ปดํฌ๋„ŒํŠธ์˜ ์ดํŽ™ํŠธ๊ฐ€ ์„ค์ •๋œ๋‹ค.

์—ฌ๊ธฐ์„œ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ Child ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?

๐Ÿ’Œ ๋‘ ๋ฒˆ์งธ ๋ Œ๋”๋ง

Child๊ฐ€ ์‚ฌ๋ผ์งˆ ๋•Œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ค. App ์ปดํฌ๋„ŒํŠธ์˜ ๋ Œ๋”๊ฐ€ ๋๋‚˜๊ณ  ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๊ฐ€ ์‹คํ–‰๋œ๋‹ค.

์ด๋•Œ ํด๋ฆฐ์—… ํ•จ์ˆ˜๋ฅผ ์ง€์ •ํ•ด์ฃผ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ˜ธ์ถœ ์ง์ „ ํด๋ฆฐ์—… ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜์—ˆ๋‹ค.

Child๋Š” ๋”์ด์ƒ ๋ Œ๋”๋ง๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํด๋ฆฐ์—… ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ๋‹ค.

๋‹ค์Œ์œผ๋กœ๋Š” Child์˜ text state๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋ฅผ ๋ณด์ž.

๐Ÿ’Œ ์„ธ ๋ฒˆ์งธ ๋ Œ๋”๋ง

์ฒซ ๋ Œ๋”๋ง ํ›„์— Child์˜ text state๋ฅผ ๋ณ€๊ฒฝํ•œ ๋ชจ์Šต์ด๋‹ค.

Child๊ฐ€ ๋ Œ๋”๋ง๋˜๊ณ  ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ง๊ด€์ ์ธ ๋ชจ์Šต์ด๋‹ค.

์ข…ํ•ฉ

ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ๋ฐ”๋ผ๋ณธ useState์™€ useEffect ํ›… ํ”Œ๋กœ์šฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ์ฒซ ๋ Œ๋”๋ง์ผ ๋•Œ
    1. App render ์‹œ์ž‘
    1. App useState ํ˜ธ์ถœ
    2. App render ๋
    3. Child render ์‹œ์ž‘
    4. Child useState ํ˜ธ์ถœ
    5. Child render ๋
    6. Child effect ๋“ฑ๋ก
    7. App effect ๋“ฑ๋ก
  • ๋‘ ๋ฒˆ์งธ ๋ Œ๋”๋ง ๋ถ€ํ„ฐ(state, effect ๋“ฑ๋ก ํ›„)
    1. App render ์‹œ์ž‘
    1. App render ๋
    2. Child render ์‹œ์ž‘
    3. Child render ๋
    4. Child effect ํด๋ฆฐ์—…
    5. Child effect ๋ฐœ์ƒ
    6. App effect ํด๋ฆฐ์—…
    7. App effect ๋ฐœ์ƒ

์ „์ฒด์ ์ธ ํ”Œ๋กœ์šฐ๋Š” ๊ฐ™์ง€๋งŒ effect๊ฐ€ ๋“ฑ๋ก๋œ ํ›„ ๋ถ€ํ„ฐ๋Š” ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ ๋ฐœ์ƒ ์ „ ํด๋ฆฐ์—…์ด ์‹คํ–‰๋œ๋‹ค๋Š” ๊ฒŒ ๋‹ค๋ฅด๋‹ค.

ํ›…์˜ ํ๋ฆ„์„ ์ดํ•ดํ•˜๋ฉด์„œ ์˜๋„์น˜ ์•Š์€ ๊ฒฐ๊ณผ๋ฅผ ๋‚ณ์ง€ ์•Š๊ฒŒ ์ฃผ์˜ํ•ด์•ผ๊ฒ ๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๊ฑธ์–ด๊ฐ€๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.

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