\n \ub9ac\uc561\ud2b8(React)\ub294 UI\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ub9e4\uc6b0 \uc778\uae30 \uc788\ub294 JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uba74\uc11c \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad00\ub9ac\ud558\ub294 \uac83\uc740 \uc27d\uc9c0 \uc54a\uc740 \uc791\uc5c5\uc785\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc5d0\uc11c \uc131\ub2a5 \ucd5c\uc801\ud654 \ubc0f \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc774 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud55c \ub2e4\uc591\ud55c \uae30\ubc95 \ubc0f \uac1c\ub150\uc744 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p>\n
\n \ub9ac\uc561\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc73c\uba70, \uac01 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub3c5\ub9bd\uc801\uc73c\ub85c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0 UI\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub294 Virtual DOM\uc744 \ud1b5\ud574 \uc2e4\uc81c DOM \ubcc0\uacbd\uc744 \ucd5c\uc18c\ud654\ud558\uc5ec \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294\ub370 \uc911\uc810\uc744 \ub461\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubb34\uc870\uac74 \ud6a8\uc728\uc801\uc73c\ub85c \ub3d9\uc791\ud558\ub294 \uac83\uc740 \uc544\ub2c8\uba70, \ucd5c\uc801\ud654\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.\n<\/p>\n
\n \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc774\ub098 \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud558\ub294 \ub370 \ub9ce\uc740 \uc2dc\uac04\uc774 \uc18c\uc694\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubb38\uc81c\ub294 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc800\ud558\uc2dc\ud0ac \uc218 \uc788\uc73c\uba70, \ucd5c\uc801\ud654\uac00 \uc774\ub8e8\uc5b4\uc9c0\uc9c0 \uc54a\uc73c\uba74 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ub290\ub9ac\uac8c \ub3d9\uc791\ud558\uac8c \ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc131\ub2a5 \ucd5c\uc801\ud654\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c \ud544\uc218\uc801\uc778 \ubd80\ubd84\uc774 \ub429\ub2c8\ub2e4.\n<\/p>\n
\n \uba54\ubaa8\uc774\uc81c\uc774\uc158(Memoization)\uc740 \ud568\uc218\uc758 \uacb0\uacfc\ub97c \uc800\uc7a5\ud558\uc5ec, \ub3d9\uc77c\ud55c \uc785\ub825 \uac12\uc5d0 \ub300\ud574 \ubc18\ubcf5\uc801\uc73c\ub85c \uacc4\uc0b0\uc744 \uc218\ud589\ud558\uc9c0 \uc54a\ub294 \ucd5c\uc801\ud654 \uae30\ubc95\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc5d0\uc11c \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc744 \ud65c\uc6a9\ud558\uba74, \ub80c\ub354\ub9c1 \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \uc8fc\ub85c \n \n \n \n \ucd5c\uc801\ud654 \uae30\ubc95\uc744 \uc774\ud574\ud55c \ud6c4, \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc744 \uc801\uc6a9\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc744 \ud65c\uc6a9\ud558\uc5ec \uc131\ub2a5\uc744 \uac1c\uc120\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.\n<\/p>\n \n \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ucd5c\uc801\ud654\uc640 \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc740 \ud6a8\uc728\uc801\uc778 \uc131\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. React.memo, useMemo, useCallback\uc744 \ud65c\uc6a9\ud558\uc5ec \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1 \ubc0f \uacc4\uc0b0\uc744 \uc904\uc784\uc73c\ub85c\uc368, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\ub97c \ud1b5\ud574 \ubc30\uc6b4 \ub0b4\uc6a9\uc744 \uc801\uc6a9\ud558\uc5ec \uc5ec\ub7ec\ubd84\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub3c4 \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc774\ub8e8\uc5b4\ubcf4\uc138\uc694.\n<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React.memo<\/code>, useMemo<\/code>, useCallback<\/code> \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.\n<\/p>\n3.1. React.memo<\/h3>\n
React.memo<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uc5ec, \ub3d9\uc77c\ud55c props\uac00 \uc804\ub2ec\ub420 \uacbd\uc6b0 \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 state\uc5d0 \uc758\uc874\ud558\uc9c0 \uc54a\uc744 \ub54c, React.memo<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\nconst MyComponent = React.memo(({ value }) => {\n console.log(\"\ub80c\ub354\ub9c1: \", value);\n return <div>{value}<\/div>;\n});<\/code><\/pre>\n3.2. useMemo<\/h3>\n
useMemo<\/code> \ud6c5\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\uc5d0\uc11c \uacc4\uc0b0 \uacb0\uacfc\ub97c \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uc5ec, \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \uc9c0\uc815\ub41c \uac12\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294 \ud55c \uacc4\uc0b0\uc744 \ubc18\ubcf5\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ubcf5\uc7a1\ud55c \uacc4\uc0b0\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\nconst memoizedValue = useMemo(() => {\n return computeExpensiveValue(a, b);\n}, [a, b]);<\/code><\/pre>\n3.3. useCallback<\/h3>\n
useCallback<\/code>\uc740 \ud568\uc218\ub97c \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uc5ec, \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \uc9c0\uc815\ub41c \uac12\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba74 \uc774\uc804\uc5d0 \uc0dd\uc131\ub41c \ud568\uc218\ub97c \uc7ac\uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\nconst memoizedCallback = useCallback(() => {\n doSomething(a, b);\n}, [a, b]);<\/code><\/pre>\n4. \ub9ac\uc561\ud2b8 \ucd5c\uc801\ud654\ub97c \uc704\ud55c \ucd94\uac00 \ud301<\/h2>\n
\n
5. \uc2e4\uc2b5: \uba54\ubaa8\uc774\uc81c\uc774\uc158 \uc801\uc6a9\ud558\uae30<\/h2>\n
import React, { useState, useMemo } from 'react';\n\nconst ExpensiveComponent = ({ calculate }) => {\n const result = useMemo(() => {\n return calculate();\n }, [calculate]);\n\n return <div>\uacb0\uacfc: {result}<\/div>;\n};\n\nconst App = () => {\n const [count, setCount] = useState(0);\n\n const calculate = () => {\n let total = 0;\n for (let i = 0; i < 1e6; i++) {\n total += i;\n }\n return total + count;\n }\n\n return (\n <div>\n <button onClick={() => setCount(count + 1)}>\uce74\uc6b4\ud2b8 \uc99d\uac00<\/button>\n <ExpensiveComponent calculate={calculate} \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n