{"id":38998,"date":"2024-11-02T02:36:13","date_gmt":"2024-11-02T02:36:13","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38998"},"modified":"2024-11-26T06:42:41","modified_gmt":"2024-11-26T06:42:41","slug":"%ed%9a%a8%ea%b3%bc-%ec%b2%98%eb%a6%ac%ec%99%80-%eb%b9%84%eb%8f%99%ea%b8%b0-%ec%9e%91%ec%97%85-useeffect-useeffect%ec%9d%98-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90%ea%b3%bc-%ec%82%ac%ec%9a%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38998\/","title":{"rendered":"\ud6a8\uacfc \ucc98\ub9ac\uc640 \ube44\ub3d9\uae30 \uc791\uc5c5 (useEffect), useEffect\uc758 \uae30\ubcf8 \uac1c\ub150\uacfc \uc0ac\uc6a9\ubc95"},"content":{"rendered":"

<\/p>\n

\n

\ub9ac\uc561\ud2b8(React)\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc704\ud55c \uc778\uae30 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc73c\ub85c UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc758 \uac00\uc7a5 \uc911\uc694\ud55c \ud2b9\uc9d5 \uc911 \ud558\ub098\ub294 \uc0c1\ud0dc \uad00\ub9ac\uc640 \uc0dd\uba85\uc8fc\uae30 \uad00\ub9ac\uac00 \uc6a9\uc774\ud558\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc758 useEffect<\/code> \ud6c5\uc5d0 \uad00\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. useEffect<\/code>\ub294 \ud6a8\uacfc(\uc0ac\uc774\ub4dc \uc774\ud399\ud2b8)\ub97c \ucc98\ub9ac\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\uba70, \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \uc27d\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4.<\/p>\n

1. useEffect\uc758 \uae30\ubcf8 \uac1c\ub150<\/h2>\n

useEffect<\/code>\ub294 \ub9ac\uc561\ud2b8\uc758 \ud6c5 \uc911 \ud558\ub098\ub85c\uc11c, \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ud2b9\uc815 \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc8fc\ub85c \ub370\uc774\ud130 fetching, DOM \uc870\uc791, \uad6c\ub3c5(subscription) \ub4f1\uc744 \ucc98\ub9ac\ud560 \ub54c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc774 \ud6c5\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uba85\uc8fc\uae30\uc640 \ubc00\uc811\ud55c \uad00\uacc4\uac00 \uc788\uc73c\uba70, \ub2e4\uc74c\uacfc \uac19\uc740 \uc0ac\ud56d\uc744 \uae30\uc5b5\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n

1.1. \uc0ac\uc774\ub4dc \uc774\ud399\ud2b8\ub780?<\/h3>\n

\uc0ac\uc774\ub4dc \uc774\ud399\ud2b8\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc608\uc0c1\uce58 \ubabb\ud55c \ud6a8\uacfc \ub610\ub294 \ud589\ub3d9\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, API \ud638\ucd9c, \ud0c0\uc774\uba38\ub97c \uc124\uc815\ud558\uac70\ub098 \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc0ac\uc6a9 \ub4f1\uc740 \ubaa8\ub450 \uc0ac\uc774\ub4dc \uc774\ud399\ud2b8\ub85c \uac04\uc8fc\ub429\ub2c8\ub2e4. \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\ub85c UI\ub97c \ub80c\ub354\ub9c1\ud558\ub3c4\ub85d \uc124\uacc4\ub418\uc5b4 \uc788\uc9c0\ub9cc, useEffect<\/code>\ub97c \ud1b5\ud574 \uc0ac\uc774\ub4dc \uc774\ud399\ud2b8\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

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

useEffect<\/code>\ub294 \ub450 \uac1c\uc758 \uc778\uc790\ub97c \ubc1b\uc2b5\ub2c8\ub2e4. \uccab \ubc88\uc9f8 \uc778\uc790\ub294 \uc2e4\ud589\ud560 \ud568\uc218\uc774\uace0, \ub450 \ubc88\uc9f8 \uc778\uc790\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc785\ub2c8\ub2e4. \uc774 \uc758\uc874\uc131 \ubc30\uc5f4\uc744 \ud1b5\ud574 \uc5b8\uc81c \uc774\ud399\ud2b8\ub97c \ub2e4\uc2dc \uc2e4\ud589\ud560\uc9c0\ub97c \uacb0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

2.1. \uae30\ubcf8\uc801\uc778 \uc0ac\uc6a9 \uc608<\/h3>\n
import React, { useEffect, useState } from 'react';\n\nconst ExampleComponent = () => {\n    const [data, setData] = useState(null);\n\n    useEffect(() => {\n        fetch('https:\/\/api.example.com\/data')\n            .then(response => response.json())\n            .then(data => setData(data))\n            .catch(error => console.error('Error fetching data:', error));\n    }, []); \/\/ \ube48 \ubc30\uc5f4\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8\ub420 \ub54c\ub9cc \uc774\ud399\ud2b8\ub97c \uc2e4\ud589\n\n    return (\n        
\n            {data ? 
{JSON.stringify(data, null, 2)}<\/pre>\n
 : 'Loading...'}\n        <\/p><\/div>\n
    );
\n};<\/p>\n
export default ExampleComponent;<\/code><\/p>\n
\uc704\uc758 \uc608\uc81c\uc5d0\uc11c useEffect<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8\ub420 \ub54c API\ub97c \ud638\ucd9c\ud558\uc5ec \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4. \ube48 \ubc30\uc5f4 []<\/code>\ub97c \uc81c\uacf5\ud558\uba74, \uc774 \uc774\ud399\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uc560\uc8fc\uae30 \ub3d9\uc548 \ud55c \ubc88\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/p>\n
2.2. \uc758\uc874\uc131 \ubc30\uc5f4\uc758 \uc0ac\uc6a9<\/h3>\n
\uc758\uc874\uc131 \ubc30\uc5f4\uc740 useEffect<\/code>\uc758 \uc2e4\ud589 \uc2dc\uc810\uc744 \uc81c\uc5b4\ud558\ub294 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ub41c \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc774\ud399\ud2b8\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/p>\n
import React, { useEffect, useState } from 'react';\n\nconst Counter = () => {\n    const [count, setCount] = useState(0);\n\n    useEffect(() => {\n        document.title = `Count: ${count}`;\n    }, [count]); \/\/ count\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \ubb38\uc11c \uc81c\ubaa9 \uc5c5\ub370\uc774\ud2b8\n\n    return (\n        
\n            
Count: {count}<\/p>\n