{"id":657,"date":"2025-02-06T20:12:00","date_gmt":"2025-02-06T11:12:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=657"},"modified":"2025-02-12T20:13:13","modified_gmt":"2025-02-12T11:13:13","slug":"react-hook-useeffect-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=657","title":{"rendered":"React Hook – UseEffect \uc774\ud574\ud558\uae30\u00a0"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

React\uc758 useEffect<\/strong>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uba85\uc8fc\uae30\ub97c \uad00\ub9ac\ud558\uace0 side effects\ub97c \ucc98\ub9ac\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 Hook\uc785\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useEffect\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95, \ub3d9\uc791 \uc2dc\uc810, \ud074\ub9b0\uc5c5 \ucc98\ub9ac, \uadf8\ub9ac\uace0 \uc8fc\uc758\uc0ac\ud56d\uc5d0 \ub300\ud574\uc11c \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 useEffect\ub97c \uc774\ud574\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\ub294\ub370 \ub3c4\uc6c0\uc774 \ub410\uc73c\uba74 \uc88b\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n\n\n\n

1. useEffect<\/code>\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n\n\n\n

useEffect<\/code>\ub294 React\uc758 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c side effects<\/strong>\ub97c \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. side effects\ub780 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uc678\uc5d0 \ubc1c\uc0dd\ud558\ub294 \uc791\uc5c5\uc744 \uc758\ubbf8\ud558\uba70, \ub2e4\uc74c\uacfc \uac19\uc740 \uc791\uc5c5\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n

  • \ub370\uc774\ud130 \uac00\uc838\uc624\uae30 (API \ud638\ucd9c)<\/li>
  • DOM \uc870\uc791<\/li>
  • \ud0c0\uc774\uba38 \uc124\uc815<\/li>
  • \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ub4f1\ub85d \ubc0f \ud574\uc81c<\/li><\/ul>\n\n\n\n

    React \ucef4\ud3ec\ub10c\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub80c\ub354\ub9c1\uc5d0\ub9cc \uc9d1\uc911\ud558\ub3c4\ub85d \uc124\uacc4\ub418\uc5b4 \uc788\uc9c0\ub9cc, \uc2e4\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub80c\ub354\ub9c1 \uc678\uc5d0\ub3c4 \ub2e4\uc591\ud55c \uc791\uc5c5\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774\ub54c, useEffect\ub97c \uc0ac\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \uc791\uc5c5\uc744 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uba85\uc8fc\uae30\uc5d0 \ub9de\ucdb0 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

    <\/div>\n\n\n\n
    \n\n\n\n

    2. useEffect<\/code>\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n\n\n\n

    useEffect<\/code>\ub294 \ub450 \uac00\uc9c0 \uc8fc\uc694 \uc778\uc790\ub97c \ubc1b\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n

    1. \ucf5c\ubc31 \ud568\uc218<\/strong>: \uc2e4\ud589\ud560 \uc791\uc5c5\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.<\/li>
    2. \uc758\uc874\uc131 \ubc30\uc5f4 (Dependency Array)<\/strong>: \uc5b4\ub5a4 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \ucf5c\ubc31\uc744 \uc2e4\ud589\ud560\uc9c0 \uacb0\uc815\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n

      <\/p>\n\n\n\n

      2.1. \uc758\uc874\uc131 \ubc30\uc5f4\uc774 \uc5c6\ub294 \uacbd\uc6b0<\/h4>\n\n\n\n
      useEffect(() => {\n  console.log(\"\ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \uc2e4\ud589\ub429\ub2c8\ub2e4.\");\n});<\/code><\/pre>\n\n\n\n
      • \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8<\/strong>\ub418\uac70\ub098 \uc5c5\ub370\uc774\ud2b8<\/strong>\ub420 \ub54c\ub9c8\ub2e4 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>
      • \ubaa8\ub4e0 \ub80c\ub354\ub9c1\ub9c8\ub2e4 \uc2e4\ud589\ub418\ubbc0\ub85c, \uc131\ub2a5\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
        <\/p>\n\n\n\n
        2.2. \ube48 \ubc30\uc5f4\uc744 \uc804\ub2ec\ud55c \uacbd\uc6b0<\/h4>\n\n\n\n
        useEffect(() => {\n  console.log(\"\ucd08\uae30 \ub80c\ub354\ub9c1 \uc2dc \ud55c \ubc88\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4.\");\n}, []);<\/code><\/pre>\n\n\n\n
        • \ucef4\ud3ec\ub10c\ud2b8\uac00 \ucc98\uc74c \ub9c8\uc6b4\ud2b8<\/strong>\ub420 \ub54c\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>
        • \uc774\ud6c4 \uc5c5\ub370\uc774\ud2b8 \uc2dc\uc5d0\ub294 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
          <\/p>\n\n\n\n
          2.3. \ud2b9\uc815 \uac12\uc5d0 \uc758\uc874\ud558\ub294 \uacbd\uc6b0<\/h4>\n\n\n\n
          useEffect(() => {\n  console.log(`count \uac12\uc774 \ubcc0\uacbd\ub428: ${count}`);\n}, [count]);<\/code><\/pre>\n\n\n\n
          • count<\/code> \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>
          • \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ub41c \uac12\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba74 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
            <\/div>\n\n\n\n
            \n\n\n\n
            3. useEffect<\/code>\uc758 \ub3d9\uc791 \uc2dc\uc810<\/h2>\n\n\n\n
            React\uc758 useEffect<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uc774\ud6c4<\/strong>\uc5d0 \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc774\ub294 React\uac00 DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc644\ub8cc\ud55c \ud6c4\uc5d0 useEffect<\/code> \ub0b4\ubd80\uc758 \ucf5c\ubc31 \ud568\uc218\uac00 \uc2e4\ud589\ub41c\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
            \ub3d9\uc791 \uc2dc\uc810<\/h4>\n\n\n\n
            1. \ucd08\uae30 \ub80c\ub354\ub9c1 \ud6c4 \uc2e4\ud589<\/strong>
              • \ucef4\ud3ec\ub10c\ud2b8\uac00 \ucc98\uc74c \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ub41c \uc9c1\ud6c4 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>
              • \uc758\uc874\uc131 \ubc30\uc5f4\uc744 \ube48 \ubc30\uc5f4([]<\/code>)\ub85c \uc124\uc815\ud558\uba74 \ucd08\uae30 \ub80c\ub354\ub9c1 \uc2dc \ud55c \ubc88\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li>
              • \uc758\uc874\uc131 \uac12 \ubcc0\uacbd \uc2dc \uc2e4\ud589<\/strong>
                • \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ub41c \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li>
                • \ucef4\ud3ec\ub10c\ud2b8 \uc5b8\ub9c8\uc6b4\ud2b8 \uc2dc \uc2e4\ud589 (\ud074\ub9b0\uc5c5 \ud568\uc218)<\/strong>
                  • \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0\uc11c \uc0ac\ub77c\uc9c8 \ub54c, \ub610\ub294 \ub2e4\uc74c \ub80c\ub354\ub9c1 \uc804\uc5d0 \ud074\ub9b0\uc5c5 \ud568\uc218\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n
                    <\/div>\n\n\n\n
                    \n\n\n\n
                    4. \ud074\ub9b0\uc5c5(Cleanup) \ucc98\ub9ac<\/h2>\n\n\n\n
                    useEffect<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8<\/strong>\ub418\uac70\ub098, \ub2e4\uc74c \ub80c\ub354\ub9c1 \uc804\uc5d0<\/strong> \uc815\ub9ac \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\ub3c4\ub85d \ud074\ub9b0\uc5c5 \ud568\uc218\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \ud074\ub9b0\uc5c5\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uc791\uc5c5\uc5d0 \uc720\uc6a9\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n
                    • \ud0c0\uc774\uba38 \uc815\ub9ac<\/li>
                    • \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \uc81c\uac70<\/li>
                    • \uad6c\ub3c5 \ud574\uc81c<\/li><\/ul>\n\n\n\n
                      \ud074\ub9b0\uc5c5 \ud568\uc218 \uc0ac\uc6a9\ubc95<\/h4>\n\n\n\n
                      useEffect(() => {\n  const timer = setInterval(() => {\n    console.log(\"\ud0c0\uc774\uba38 \uc2e4\ud589 \uc911...\");\n  }, 1000);\n\n  return () => {\n    clearInterval(timer); \/\/ \ud0c0\uc774\uba38 \uc815\ub9ac\n    console.log(\"\ud0c0\uc774\uba38\uac00 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\");\n  };\n}, []);<\/code><\/pre>\n\n\n\n
                      • return<\/code>\uc73c\ub85c \ubc18\ud658\ub41c \ud568\uc218\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8<\/strong>\ub418\uac70\ub098, \ub2e4\uc74c \ub80c\ub354\ub9c1 \uc804\uc5d0<\/strong> \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>
                      • \uc774\ub97c \ud1b5\ud574 \uba54\ubaa8\ub9ac \ub204\uc218\ub97c \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
                        <\/div>\n\n\n\n
                        \n\n\n\n
                        5. \uc608\uc81c \ucf54\ub4dc<\/h2>\n\n\n\n
                        5.1. \uae30\ubcf8 \uc608\uc81c: \ub80c\ub354\ub9c1 \uc2dc\uc810 \ud655\uc778<\/h4>\n\n\n\n
                        import React, { useState, useEffect } from \"react\";\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log(\"\ub80c\ub354\ub9c1 \uc644\ub8cc \ud6c4 \uc2e4\ud589\");\n  });\n\n  useEffect(() => {\n    console.log(\"\ucd08\uae30 \ub80c\ub354\ub9c1 \uc2dc \ud55c \ubc88\ub9cc \uc2e4\ud589\");\n  }, []);\n\n  useEffect(() => {\n    console.log(`count \uac12\uc774 \ubcc0\uacbd\ub428: ${count}`);\n  }, [count]);\n\n  return (\n    <div>\n      <p>Count: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increase Count<\/button>\n    <\/div>\n  );\n}\n\nexport default Example;<\/code><\/pre>\n\n\n\n
                        \n\n\n\n
                        5.2. \ud074\ub9b0\uc5c5 \uc608\uc81c: \ud0c0\uc774\uba38 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n\n\n\n
                        import React, { useState, useEffect } from \"react\";\n\nfunction Timer() {\n  useEffect(() => {\n    const timer = setInterval(() => {\n      console.log(\"\ud0c0\uc774\uba38 \uc2e4\ud589 \uc911...\");\n    }, 1000);\n\n    return () => {\n      clearInterval(timer);\n      console.log(\"\ud0c0\uc774\uba38\uac00 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\");\n    };\n  }, []);\n\n  return <div>\ud0c0\uc774\uba38\uac00 \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.<\/div>;\n}\n\nfunction App() {\n  const [showTimer, setShowTimer] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setShowTimer(!showTimer)}>\n        {showTimer ? \"\ud0c0\uc774\uba38 \uc885\ub8cc\" : \"\ud0c0\uc774\uba38 \uc2dc\uc791\"}\n      <\/button>\n      {showTimer && <Timer \/>}\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
                        <\/div>\n\n\n\n
                        \n\n\n\n
                        6. useEffect<\/code> \uc0ac\uc6a9 \uc2dc \uc8fc\uc758 \uc0ac\ud56d<\/h2>\n\n\n\n
                        1. \uc758\uc874\uc131 \ubc30\uc5f4 \uad00\ub9ac<\/strong>:
                          • \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ub41c \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc useEffect<\/code>\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>
                          • \uc758\uc874\uc131 \ubc30\uc5f4\uc744 \uc798\ubabb \uc124\uc815\ud558\uba74, \uc758\ub3c4\uce58 \uc54a\uc740 \ub3d9\uc791\uc774\ub098 \uc131\ub2a5 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li>
                          • \ubb34\uac70\uc6b4 \uc791\uc5c5\uc740 \ud53c\ud558\uae30<\/strong>:
                            • useEffect<\/code> \ub0b4\ubd80\uc5d0\uc11c \ubb34\uac70\uc6b4 \uc791\uc5c5\uc744 \uc218\ud589\ud558\uba74 \ub80c\ub354\ub9c1 \uc131\ub2a5\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>
                            • \ubb34\uac70\uc6b4 \uc791\uc5c5\uc740 \ubcc4\ub3c4\uc758 \ud568\uc218\ub85c \ubd84\ub9ac\ud558\uac70\ub098, \ube44\ub3d9\uae30 \uc791\uc5c5\uc73c\ub85c \ucc98\ub9ac\ud558\uc138\uc694.<\/li><\/ul><\/li>
                            • \ud074\ub9b0\uc5c5 \ud568\uc218 \uc791\uc131<\/strong>:
                              • \ud0c0\uc774\uba38, \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108, \uad6c\ub3c5 \ub4f1\uc740 \ubc18\ub4dc\uc2dc \ud074\ub9b0\uc5c5 \ud568\uc218\ub97c \ud1b5\ud574 \uc815\ub9ac\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>
                              • \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 \uba54\ubaa8\ub9ac \ub204\uc218(memory leak)\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li>
                              • \ube44\ub3d9\uae30 \uc791\uc5c5 \uc8fc\uc758<\/strong>:
                                • useEffect<\/code> \ub0b4\ubd80\uc5d0\uc11c \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \uc218\ud589\ud560 \ub54c, \ube44\ub3d9\uae30 \ud568\uc218 \uc790\uccb4\ub97c useEffect<\/code>\uc5d0 \uc9c1\uc811 \uc804\ub2ec\ud558\uc9c0 \ub9c8\uc138\uc694.<\/li>
                                • \ube44\ub3d9\uae30 \uc791\uc5c5\uc740 useEffect<\/code> \ub0b4\ubd80\uc5d0\uc11c \ubcc4\ub3c4\uc758 \ud568\uc218\ub85c \uc815\uc758\ud574\uc57c  \uc791\uc5c5\uc758 \ud750\ub984\uc744 \uba85\ud655\ud788 \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/li>
                                • useEffect<\/code>\ub294 \ubc18\ud658\uac12\uc73c\ub85c \ud074\ub9b0\uc5c5 \ud568\uc218(cleanup function)\ub97c \uae30\ub300\ud558\ub294 \ubc18\uba74 \ube44\ub3d9\uae30 \ud568\uc218\ub294 Promise<\/code>\ub97c \ubc18\ud658\ud558\ubbc0\ub85c, useEffect\uc5d0 \uc9c1\uc811 \uc804\ub2ec\ud558\uba74 React\uac00 \uc774\ub97c \ud074\ub9b0\uc5c5 \ud568\uc218\ub85c \uc798\ubabb \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4<\/li><\/ul><\/li><\/ol>\n\n\n\n
                                  <\/div>\n\n\n\n
                                  \n\n\n\n
                                  7. \uc694\uc57d<\/h2>\n\n\n\n
                                  React\uc758 useEffect<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uba85\uc8fc\uae30\ub97c \uad00\ub9ac\ud558\uace0, \ubd80\uc218\ud6a8\uacfc\ub97c \ucc98\ub9ac\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 Hook\uc785\ub2c8\ub2e4. \uc8fc\uc694 \ud3ec\uc778\ud2b8\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n
                                  • \ub80c\ub354\ub9c1\ub9c8\ub2e4 \uc2e4\ud589<\/strong>: \uc758\uc874\uc131 \ubc30\uc5f4\uc774 \uc5c6\uc744 \ub54c.<\/li>
                                  • \ub9c8\uc6b4\ud2b8 \uc2dc \ud55c \ubc88 \uc2e4\ud589<\/strong>: \ube48 \ubc30\uc5f4\uc744 \uc804\ub2ec\ud560 \ub54c.<\/li>
                                  • \ud2b9\uc815 \uac12 \ubcc0\uacbd \uc2dc \uc2e4\ud589<\/strong>: \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \uac12\uc744 \uc804\ub2ec\ud560 \ub54c.<\/li>
                                  • \ud074\ub9b0\uc5c5 \ud568\uc218<\/strong>: \ucef4\ud3ec\ub10c\ud2b8 \uc5b8\ub9c8\uc6b4\ud2b8 \uc2dc \uc815\ub9ac \uc791\uc5c5\uc744 \uc218\ud589.<\/li><\/ul>\n\n\n\n
                                    useEffect<\/code>\ub97c \uc801\uc808\ud788 \ud65c\uc6a9\ud558\uba74 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 \uc131\ub2a5 \ucd5c\uc801\ud654\uc5d0 \ud070 \ub3c4\uc6c0\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
                                    <\/div>\n\n\n\n
                                    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
                                    React\uc758 useEffect\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uba85\uc8fc\uae30\ub97c \uad00\ub9ac\ud558\uace0 side effects\ub97c \ucc98\ub9ac\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 Hook\uc785\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useEffect\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95, \ub3d9\uc791 \uc2dc\uc810, \ud074\ub9b0\uc5c5 \ucc98\ub9ac, \uadf8\ub9ac\uace0 \uc8fc\uc758\uc0ac\ud56d\uc5d0 \ub300\ud574\uc11c \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 useEffect\ub97c \uc774\ud574\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\ub294\ub370 \ub3c4\uc6c0\uc774 \ub410\uc73c\uba74 \uc88b\uaca0\uc2b5\ub2c8\ub2e4. 1. useEffect\ub780 \ubb34\uc5c7\uc778\uac00? useEffect\ub294 React\uc758 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c side effects\ub97c \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. side effects\ub780 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uc678\uc5d0 \ubc1c\uc0dd\ud558\ub294 \uc791\uc5c5\uc744 \uc758\ubbf8\ud558\uba70, \ub2e4\uc74c\uacfc \uac19\uc740 […]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,62,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/657"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=657"}],"version-history":[{"count":4,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/657\/revisions"}],"predecessor-version":[{"id":699,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/657\/revisions\/699"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}