6.1 useMemo ๊ฐ์6.1.1 ๋ฉ๋ชจ์ด์ ์ด์
(Memoization)์ด๋?6.1.2 ํจ์ํ ์ปดํฌ๋ํธ6.2 useMemo์ ๊ธฐ๋ณธ ๊ตฌ์กฐ
6.2.1 useEffect ์ useMemo์ ์ฐจ์ด6.3 (์ค์ต1) useMemo ์ฌ์ฉํด๋ณด๊ธฐ6.3 (์ค์ต2) useMemo ์ฌ์ฉํด๋ณด๊ธฐ
ย
6.1 useMemo ๊ฐ์
ย
useMemo๋ ์ปดํฌ๋ํธ์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ์ฌ ์ฌ์ฉ๋๋ ๋ํ์ ์ธ ํ
์
๋๋ค. useMemo์์ Memo๋ memoization์ ๋ปํ๋ฉฐ ์ด์ด์ง๋ ์ฑํฐ์์ ๋ฉ๋ชจ์ด์ ์ด์
๊ณผ useMemo๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๊ฐ ๋ฌด์์ธ์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ย
6.1.1 ๋ฉ๋ชจ์ด์ ์ด์ (Memoization)์ด๋?
ย
๋ฉ๋ชจ์ด์ ์ด์
๊ธฐ๋ฒ์ ์ฐ์ฐ์ ๊ฒฐ๊ด๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํด ๋๊ณ ์ด์ ๋ ๋๋ง์์ ๊ณ์ฐํ ๊ฐ๊ณผ ํ์ฌ ๋ ๋๋ง์์์ ๊ฒฐ๊ณผ๊ฐ ๊ฐ์ ๊ฒฝ์ฐ, ์ค๋ณต ์ฐ์ฐ์ ํ ํ์ ์์ด ์ ์ฅํด ๋ ๊ฐ์ ์ฌ์ฌ์ฉ ํ ์ ์์ผ๋ฏ๋ก ์ฑ๋ฅ์ ์ต์ ํํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด A๋ผ๋ ํจ์์ ์ ์ฒด ์คํ์๊ฐ์ด 10์ด๋ผ๊ณ ๊ฐ์ ํด๋ณธ๋ค๋ฉด A ํจ์๊ฐ ์คํ๋ ๋๋ง๋ค 10์ด๋ผ๋ ์๊ฐ์ด ๊ฑธ๋ฆฌ๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ฉ๋ชจ์ด์ ์ด์
์ ํตํด ๊ฐ์ ์ ์ฅํ๊ณ ํจ์๊ฐ ์คํ๋ ๋ ๊ฒฐ๊ด๊ฐ๋ง ์ฌ์ฌ์ฉํ๋ค๋ฉด ๊ทธ๋งํผ ์ฐ์ฐ์ ์ค์ผ ์ ์์ผ๋ฏ๋ก ํ๋ก๊ทธ๋จ์ ์คํ ์๋๋ฅผ ์ฌ๋ฆด ์ ์๊ฒ ๋ฉ๋๋ค.
ย
6.1.2 ํจ์ํ ์ปดํฌ๋ํธ
ย
์๋ ์์ ์์ ํจ์ํ ์ปดํฌ๋ํธ๋ MyComponent๋ฅผ ๋งํ๋ฉฐ, MyComponent๋ฅผ ํธ์ถํ๋ ๊ฒ์ ํจ์ํ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง์ด ๋๋ ๊ฒ์ ์๋ฏธํ๋ฉฐ ํจ์๊ฐ ํธ์ถ๋ ๋๋ง๋ค ํจ์ ๋ด๋ถ์ ๋ชจ๋ ๋ณ์๋ฅผ ์ด๊ธฐํํฉ๋๋ค.
function calc(a, b) { return a + b } // ํจ์ํ ์ปดํฌ๋ํธ const MyComponent() { const result = calc(3,5) return <p>{result}</p> }
ย
๊ธฐ๋ณธ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ state๊ฐย ๋ณ๊ฒฝ๋๊ฑฐ๋, props๊ฐ ๋ณ๊ฒฝ๋์์ ๋๋ง๋คย ๋ฆฌ๋ ๋๋ง์ดย ๋๋๋ฐ, ๋ฆฌ๋ ๋๋ง์ดย ๋ ๋๋ง๋คย MyComponent๋ฅผย ํธ์ถํ๊ฒ ๋๊ณ ๋ณ์ result๋ย ์ด๊ธฐํ๋๋ฏ๋กย ๋งค๋ฒย calcย ํจ์๋ฅผ ์คํํฉ๋๋ค. ์ ์์ ์ ๊ฐ์ด ๊ฐ๋จํ ๊ณ์ฐ๋ง ํ๊ณ ๋๋ด๋ ํจ์๋ผ๋ฉด ์๊ด์๊ฒ ์ง๋ง, ๋ง์ฝย calcย ํจ์๊ฐ ์คํ๋ ๋๋ง๋ค ์ฝ 10์ด ๊ฐ๋์ ์ฐ์ฐ์ ํ๋ค๊ณ ๊ฐ์ ํด๋ณด๋ฉด ์ด๋จ๊น์?
๋ฆฌ๋ ๋๋ง์ด ์ธ ๋ฒ๋ง ์ผ์ด๋๋ 30์ด ๊ฐ๋์ ์ฐ์ฐ์ด ์ํ๋๋ฏ๋ก ๋งค์ฐ ๋นํจ์จ์ ์
๋๋ค. ์ด๋ฌํ ํ์์ ํด๊ฒฐํ๊ธฐ ์ํด ์ฐ๋ฆฌ๋ย useMemo๋ฅผย ์ฌ์ฉํ์ฌ ๋ถํ๊ฐ ๊ฑธ๋ฆฌ๋ ํจ์์ ๊ฒฐ๊ด๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํ ๋ค,ย ๋ฆฌ๋ ๋๋ง์ดย ๋ ๋ ๊ทธ ๊ฒฐ๊ด๊ฐ๋ง ๊ฐ์ ธ์์ ์ฌ์ฌ์ฉํด ์ค์ผ๋ก์จ ์ฑ๋ฅ์ย ์ต์ ํํ ย ์ ์์ต๋๋ค.
ย
6.2 useMemo์ ๊ธฐ๋ณธ ๊ตฌ์กฐ
ย
// ๋น ๋ฐฐ์ด์ด ๋ค์ด๊ฐ ๊ฒฝ์ฐ const result = useMemo(() => calc(a, b), []); // ์์๊ฐ ๋ค์ด๊ฐ ๊ฒฝ์ฐ const result = useMemo(() => calc(a, b), [item);
ย
useMemo์ ๊ธฐ๋ณธ์ ์ธ ๊ตฌ์กฐ๋ ์์ ๊ฐ์ต๋๋ค. useMemo๋ ๋ ๊ฐ์ ์ธ์๋ฅผ ๋ฐ๋๋ฐ ์ฒซ ๋ฒ์งธ ์ธ์๋ ์ฝ๋ฐฑ ํจ์, ๋ ๋ฒ์งธ ์ธ์๋ ์์กด์ฑ ๋ฐฐ์ด(Array dependencies)์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ ๋ฐฐ์ด์ ๋ฐ์ต๋๋ค. ์ฒซ ๋ฒ์งธ ์ธ์์ ๋ค์ด๊ฐ๋ ์ฝ๋ฐฑ ํจ์์ ๊ฒฐ๊ด๊ฐ์ useMemo์ ๋ฆฌํด๊ฐ์ผ๋ก ์ฌ์ฌ์ฉํ๋ ๊ฒฐ๊ด๊ฐ์ด ๋ฉ๋๋ค.
ย
๋ ๋ฒ์งธ ์ธ์์ ์์กด์ฑ ๋ฐฐ์ด์ ์์๊ฐย ๋ค์ด๊ฐ ๋์๋ย ์์กด์ฑ ๋ฐฐ์ด์ ์ ๋ฌ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋ ๋๋งย ์ฝ๋ฐฑย ํจ์๊ฐ ์คํ๋๋๋ฐ, ์ด๋ ๋ ๋๋ง ๊ณผ์ ์์ ๋ฐฐ์ด ์์ ์์ item์ ๊ฐ์ด ๋ณ๊ฒฝ๋์๋์ง๋ฅผ ํ์ธํ๊ณ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์๋งย ์ฝ๋ฐฑย ํจ์๋ฅผย ๋์์์ผ์ย ๋ฉ๋ชจ์ด์ ์ด์
(Memoization)๋ ๊ฐ๋ง ๋ค์ ๊ณ์ฐํฉ๋๋ค.
๋ฐ๋ผ์ย useMemo๋ย ์์กด์ฑ ๋ฐฐ์ด์์ ์ ๋ฌํ๋ ๊ฐ์ ๋ณ๊ฒฝ ์ฌ๋ถ์ ๋ฐ๋ผ ์ค๋ณต ์ฐ์ฐ์ย ์ต์ํํ ย ์ย ์์ผ๋ฏ๋กย ์ปดํฌ๋ํธ์ ์ฑ๋ฅ์ ์ต์ ํํ ์ ์์ต๋๋ค.
6.2.1 useEffect ์ useMemo์ ์ฐจ์ด
ย
useMemo๋ ์ด์ ์ฑํฐ 3์์ ๋ค๋ค๋ useEffect์ ๋น์ทํ๊ฒ ์์กด์ฑ ๋ฐฐ์ด(Array dependencies)์ ์ ๋ฌ๋ ๊ฐ์ ๋ณ๊ฒฝ ์ฌ๋ถ์ ๋ฐ๋ผ ์ฝ๋ฐฑ ํจ์๊ฐ ์คํ๋ฉ๋๋ค.
ย
์ด ๋ ๊ฐ์ง Hook์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ ๋ ๋๋ง ๊ณผ์ ์ค์ ๋์ ์ฌ๋ถ์
๋๋ค.
useEffect๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ๋ ๋๋ง์ด ์๋ฃ๋ ์ดํ์ ์คํ๋๋ฉฐ, ๋ ๋๋ง ํ ์ํ๊ฐ ์
๋ฐ์ดํธ ๋์์ ๋๋ฅผ ๊ฐ์งํ์ฌ ๋์ํ๊ธฐ ๋๋ฌธ์ ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํ์ง ๋ชปํฉ๋๋ค.
์ด์ ๋ฌ๋ฆฌ useMemo๋ ๋ ๋๋ง ๊ณผ์ ์ค์ ์คํ๋ฉ๋๋ค. ๋ ๋๋ง ๊ณผ์ ์ค์ ์์กด์ฑ ๋ฐฐ์ด์ ๊ฐ์ด ๋ณ๊ฒฝ ๋์๋์ง ํ์ธํ ํ, ๊ฐ์ด ๋ณ๊ฒฝ ๋์๋ค๋ฉด ์ด์ ์ ์ ์ฅํ ๊ฐ๊ณผ ๋น๊ตํ์ฌ ๊ฐ์ด ๋ค๋ฅธ ๊ฒฝ์ฐ์๋ง ๋ฆฌ๋ ๋๋ง ํด์ค๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ useMemo๋ ๋ฉ๋ชจ์ด์ ์ด์
๊ธฐ๋ฒ์ ํตํด ๋ถํ์ํ ๊ณ์ฐ์ ์ต์ํํ๊ณ , ๋ฆฌ๋ ๋๋ง์ ๋ง์ ์ ์์ผ๋ฏ๋ก ๋ ๋๋ง ์ฑ๋ฅ์ ์ต์ ํํ ๋ useMemo Hook์ ์ฌ์ฉํฉ๋๋ค.
ย
6.3 (์ค์ต1) useMemo ์ฌ์ฉํด๋ณด๊ธฐ
ย
์ด๋ฒ ์ฑํฐ์์๋ ์์ ๋ฅผ ํตํด
useMemo
๋ฅผ ์ฌ์ฉํด๋ณด๊ฒ ์ต๋๋ค. ํด๋น ์์ ๋ ๋ฌด๊ฑฐ์ด ์ฐ์ฐ์ ์คํํ๋ฉด์ ์ซ์์ ํ
์คํธ๋ฅผ ๋ณ๊ฒฝํ๋ ์ฝ๋์
๋๋ค. App.jsx์์๋ ํ๋ฉด์ด ๋ ๋๋ง ๋ ๋๋ง๋ค heavyCalc
ํจ์๋ฅผ ์คํํ๋ฉฐ number์ text๋ฅผ ๋ฐ๊ฟ์ฃผ๋ ํจ์ ํธ๋ค๋ฌ, ๊ทธ๋ฆฌ๊ณ ๋ฐ๋ number์ text๊ฐ์ ๋ณด์ฌ์ฃผ๋ ShowState ์ปดํฌ๋ํธ๊ฐ ์์ต๋๋ค.ย
import React, { useState,useMemo } from 'react'; import ShowState from './ShowState'; export default function App() { const [number, setNumber] = useState(0); const [text, setText] = useState(''); // ๋ฌด๊ฑฐ์ด ์ฐ์ฐ์ ์คํํ๋ ํจ์ function heavyCalc() { let s = 0; for (let i = 0; i < 1000000000; i++) { s += i; } return s; } let calc = heavyCalc(); // number ๊ฐ ๋ฐ๊ฟ์ฃผ๋ ํจ์ const increaseNum = () => { setNumber((prev) => prev + 1); }; const decreaseNum = () => { setNumber((prev) => prev - 1); }; // text๊ฐ ๋ฐ๊ฟ์ฃผ๋ ํจ์ const handleText = (e) => { setText(e.target.value); }; return ( <> <h4> โจ ์์ฒญ๋ ์ฐ์ฐ๊ฐ</h4> <p>{calc}</p> <h4> โจ ์ซ์๋ฐ๊พธ๊ธฐ</h4> <button onClick={increaseNum}>+</button> <button onClick={decreaseNum}>-</button> <h4> โจ ๊ธ์๋ฐ๊พธ๊ธฐ</h4> <input type="text" onChange={handleText} /> <ShowState number={number} text={text} /> </> ); }
ย
ShowState
์ปดํฌ๋ํธ์์๋ App.jsx์์ ๋ฐ๊พผ ๊ฐ๋ค์ ์ถ๋ ฅํด์ฃผ๊ณ ๊ฐ์ด ๋ฐ๋ ๋ ๋ง๋ค '์ซ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.' ์ '๊ธ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.' ๋ผ๋ ๋ฌธ๊ตฌ๋ฅผ ์ฝ์์ ์ถ๋ ฅํฉ๋๋ค.ย
import React, { useMemo } from 'react'; export default function ShowState({ number, text }) { const consoleNumber = (number) => { console.log('์ซ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.'); return number; }; const consoleText = (text) => { console.log('๊ธ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.'); return text; }; const showNum = consoleNumber(number); const showText = consoleText(text); return ( <div> <p> ์ซ์ : {showNum}</p> <p> ๊ธ์ : {showText}</p> </div> ); }
์ ์์ ๋ฅผ ์คํํ๋ฉด ์ด๋ฐ ๋ชจ์ต์
๋๋ค.
+
์ -
๋ฒํผ์ ๋๋ฅด๋ฉด ์ซ์ ๊ฐ์ด ๋ฐ๋๊ณ , input์ฐฝ์ ๊ธ์๋ฅผ ์
๋ ฅํ๋ฉด ์
๋ ฅํ๋๋๋ก ๊ธ์๊ฐ ์ถ๋ ฅ๋๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ์ด๋ฅผ ์คํํด๋ณด๋ฉด ๋งค์ฐ ๋๋ฆฌ๊ฒ ์คํ๋๋๋ฐ, ์ด๋ ์ซ์๋ ๊ธ์๋ฅผ ๋ฐ๊ฟ์ผ๋ก์จ ํ๋ฉด์ด ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค heavyCalc ํจ์๊ฐ ์คํ๋๊ธฐ ๋๋ฌธ์
๋๋ค.ํ์ง๋งย
heavyCalc
ย ํจ์์ ๊ฒฐ๊ณผ๊ฐ์ธ calc๋ ๊ณ์ ๊ฐ์ ๊ฐ์ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ ๋งค๋ฒ ์๋ก ์ฐ์ฐ์ ํ ํ์๊ฐ ์์ต๋๋ค. ์ด ๋ ์ธ ์ ์๋ ๊ฒ์ด ์ด์ ์ ์ด๋ฏธ ๊ณ์ฐํ ๊ฐ์ ์ฌ์ฌ์ฉํ ์ ์๋๋ก ๋์์ฃผ๋ ํ
์ด ย useMemo
ย ์
๋๋ค.ย
App.jsx์
heavyCalc
ํจ์ ์คํ๋ฌธ์ ์ด๋ ๊ฒ useMemo
๋ฅผ ์ด์ฉํ์ฌ ๊ฐ์ผ๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น์?ย
const calc = useMemo(() => { return heavyCalc(); }, []);
ย
useMemo
๋ฅผ ํตํด ์ด์ ์ ๊ณ์ฐํ๋ 499999999067109000 ๋ผ๋ ๊ฐ์ ๊ณ์ ์ฌ์ฌ์ฉํ์ฌ ํ๋ฉด์ ์ถ๋ ฅํด์ฃผ๊ธฐ ๋๋ฌธ์ ๊ฐ์ ๊ณ์ฐ์ ์ํด ๋ถํ๋ฅผ ์ผ์ผํค์ง ์๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.์ด์ฒ๋ผ
useMemo
๋ ๋ ๋๋ง์ด ๋ฐ์ํ์ ๋, ์ด์ ๋ ๋๋ง๊ณผ ํ์ฌ ๋ ๋๋ง ์ฌ์ด์ ๊ฐ์ด ๋์ผํ๋ค๋ฉด ๋ค์ ํจ์๋ฅผ ํธ์ถ์ ํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ๊ตฌํ๋ ๋์ , ๊ธฐ์กด์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํด๋์๋ ๊ฐ์ ๊ทธ๋๋ก ์ฌ์ฉํ๋๋ก ๋์์ค๋๋ค.์ด์ ๋ถํ์ํ ๊ณ์ฐ์ ํ์ง ์๊ฒ ๋์์ผ๋ ๋ค์ ๊ฐ์ ๋ณ๊ฒฝํด๋ณผ๊น์?
increaseNum
ํจ์๋ฅผ ๋๋ฒ ์คํํ์ฌ ์ซ์๊ฐ 2๊ฐ ๋์์ต๋๋ค. ํ์ง๋ง ์ฝ์์ฐฝ์ ํ์ธํ๋ increaseNum
ํจ์๊ฐ ์คํ๋ ๋๋ง๋ค Text๊ฐ์ ๋ฐ๊พธ์ง ์์์์๋ '๊ธ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.' ๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๊ฐ์ด ์ถ๋ ฅ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.๋ณ๊ฒฝํ๊ณ ์ ํ๋ state์ ํด๋น๋์ง ์๋ ํจ์๊ฐ ์คํ๋ ํ์๋ ์๊ธฐ ๋๋ฌธ์
useMemo
๋ฅผ ์ฌ์ฉํ์ฌ ์ซ์๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์ ๊ธ์๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์๋ง ๊ฐ๊ฐ ๊ทธ์ ๋ง๋ console ์ถ๋ ฅ์ ํ๋๋ก ํด๋ณด๊ฒ ์ต๋๋ค.ย
const showNum = useMemo(() => consoleNumber(number), [number]); const showText = useMemo(() => consoleText(text), [text]);
ย
showNum๊ณผ showText ๊ฐ์ ์ด๋ ๊ฒ ๋ณ๊ฒฝํ์ฌ number ๊ฐ์ด ๋ณํ์๋๋ง
consoleNumber
ํจ์๊ฐ, text๊ฐ์ด ๋ณํ์๋๋ง consoleText
ํจ์๊ฐ ์คํ๋๋๋ก ํฉ๋๋ค.์ด์ ์ฒ๋ผ
increasNum
์ ๋ ๋ฒ ์คํํ์ ๋ text์ ๊ฐ์ ๋ณ๊ฒฝํ์ง ์์์ผ๋ฏ๋ก consoleNumber
ํจ์๋ง ๋ ๋ฒ ์คํ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.์ด ์ํ์์ text์ ๊ฐ์ ๋ค์ฏ ๋ฒ ๋ณ๊ฒฝํ๋ฉด consoleTextํจ์๋ ๋ค์ฏ ๋ฒ ์คํ๋๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
์ฆ, ์ซ์๊ฐ ๋ณ๊ฒฝ๋ ๋๋ โ์ซ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.โ ๋ผ๋ console๋ง ์ถ๋ ฅ๋๊ณ , ๊ธ์๊ฐ ๋ณ๊ฒฝ๋ ๋๋ '๊ธ์๊ฐ ๋ณ๊ฒฝ๋์์ต๋๋ค.' ๋ผ๋ console๋ง ์ถ๋ ฅ๋ฉ๋๋ค.
์ด์ฒ๋ผ
useMemo
๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฉ๋ชจ์ด์ ์ด์
๊ธฐ๋ฒ์ ์ด์ฉํ์ฌ ์ด์ ์ ์ ์ฅ๋์๋ ๊ฒฐ๊ณผ๋ฅผ ๋ค์ ๊ฐ์ ธ์ ์ฌ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฝ๋ ์ต์ ํ์ ๋์์ ์ค ์ ์์ต๋๋ค.ย
6.3 (์ค์ต2) useMemo ์ฌ์ฉํด๋ณด๊ธฐ
ย
์ด๋ฒ ์์ ์์๋
useMemo
๋ฅผ ์ฌ์ฉํ์ฌ useEffect
์ ์์กด์ฑ ๋ฐฐ์ด์ด ๊ฐ์ฒด ํ์
์ผ ๋ ์๊ธฐ๋ ์ฐธ์กฐ ๋์ผ์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด ๋ณด๊ฒ ์ต๋๋ค. ์๋ ์์ ๋ number์ answer๋ฅผ ๋ณ๊ฒฝํ ์ ์๊ณ , ๊ทธ์ค answer๊ฐ ๋ฐ๋ ๋๋ง ์ฝ์์ด ์ฐํ๋๋ก ์์ฑํด๋์ ์ฝ๋์
๋๋ค.ย
import React, { useEffect, useState, useMemo } from "react"; function App() { const [number, setNumber] = useState(0); const [isTrue, setIsTrue] = useState(true); const answer = isTrue ? "true" : "false"; // answer๊ฐ ๋ฐ๋ ๋๋ง ์ฝ์์ด ์ฐํ๋๋ก ์์ฑ useEffect(() => { console.log("answer์ด ๋ณ๊ฒฝ๋์์ต๋๋ค."); }, [answer]); return ( <div> <p>โจ number</p> <input type="number" value={number} onChange={(e) => setNumber(e.target.value)} /> <hr /> <p>โจ answer</p> <p>T or F ? {answer}</p> <button onClick={() => setIsTrue(!isTrue)}>Click</button> </div> ); } export default App;
ย
์๋์ ๊ฐ์ด number๋ฅผ 10์ผ๋ก, answer๋ฅผ false๋ก ๋ณ๊ฒฝํด๋ณด๋ฉด answer๋ฅผ ๋ณ๊ฒฝํ์ ๋๋ง ์ฝ์์ด ์ฐํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
ย
ย
๊ทธ๋ ๋ค๋ฉด ์ด๋ฒ์๋ ์์ ํ์
์ธ answer๋ฅผ ์๋์ฒ๋ผ ๊ฐ์ฒด ํ์
์ผ๋ก ๋ง๋ค์ด ์ฃผ๊ณ ์ด์ ๊ณผ ๊ฐ์ด number๋ฅผ ๋ณ๊ฒฝํด๋ณด๊ฒ ์ต๋๋ค.
ย
import React, { useEffect, useState, useMemo } from "react"; function App() { const [number, setNumber] = useState(0); const [isTrue, setIsTrue] = useState(true); const answer = { bool: isTrue ? "true" : "false" }; useEffect(() => { console.log("answer์ด ๋ณ๊ฒฝ๋์์ต๋๋ค."); }, [answer]); return ( <div> <p>โจ number</p> <input type="number" value={number} onChange={(e) => setNumber(e.target.value)} /> <hr /> <p>โจ answer</p> <p>T or F ? {answer.bool}</p> <button onClick={() => setIsTrue(!isTrue)}>Click</button> </div> ); } export default App;
ย
์๋์ ์คํ๋ ๊ฒ์ ๋ณด๋ฉด number๋ง ๋ณ๊ฒฝํ์์๋ ์ฝ์์ด ์ถ๋ ฅ๋์๊ณ ์ด๋ ๊ณง answer๊ฐ ๋ณ๊ฒฝ๋๊ณ ์๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
ย
ย
์ด๋ ๊ฒ ๋์ํ๋ ์ด์ ๋ ๋ฐ์ดํฐ ํ์
๊ณผ ๊ด๋ จ์ด ์์ต๋๋ค.
number๋ฅผ ๋ณ๊ฒฝํด์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋๋ฉด, ํจ์ํ ์ปดํฌ๋ํธ์ธ App ์์ ์๋ ๋ณ์๋ค์ด ๋ชจ๋ ์ด๊ธฐํ๋์ด ๋ค์ ํ ๋น๋๊ธฐ ๋๋ฌธ์ ๊ฐ์ฒด ํ์
์ธ answer๊ฐ ๋ค์ ํ ๋น๋ฉ๋๋ค.
๊ทธ๋ฌ๋ ๊ฐ์ฒด ํ์
์ ๊ทธ ๊ฐ์ด ๋ณ์์ ์ง์ ์ ์ฅ๋๋ ๊ฒ ์๋๋ผ, ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๊ฐ์ด ํ ๋น๋์ด ๊ฐ์ ์ฐธ์กฐํ๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ฉด ๊ฐ์ฒด๋ ๋ค๋ฅธ ๋ฉ๋ชจ๋ฆฌ์ ํ ๋น๋๊ณ , ๋ณ์์๋ ๊ทธ์ ๋ง๋ ๋ฌ๋ผ์ง ์ฃผ์๊ฐ์ด ํ ๋น๋ฉ๋๋ค.
useEffect
๋ ๋ ๋๋ง ์ ๊ณผ ํ์ answer์ ์ฃผ์๊ฐ์ด ๋ค๋ฅด๋ค๊ณ ํ๋จํ์ฌ ์ฝ์์ ์ถ๋ ฅํ๊ฒ ๋๋ ๊ฒ์
๋๋ค. ย
const answer = useMemo(() => { return { bool: isTrue ? "true" : "false" }; }, [isTrue]);
ย
์ด๋ฌํ ๋ฌธ์ ๋ฅผ
useMemo
๋ฅผ ํตํด ํด๊ฒฐํด๋ณด๊ฒ ์ต๋๋ค. ์ ์ฝ๋์ ๊ฐ์ด useMemo
๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ๋ฉด ์ต์ด๋ก ๋ ๋๋ง ๋ ๋ ๊ฐ์ฒด์ ์ฃผ์๊ฐ์ answer๊ฐ ๋ฉ๋ชจ์ด์ ์ด์
ํฉ๋๋ค. ์ดํ ๋ฆฌ๋ ๋๋ง๋ถํฐ๋ ๋ฉ๋ชจ์ด์ ์ด์
๋ ์ฃผ์๊ฐ์ ์ฌ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ ๋ฐ๋ณต์ ์ผ๋ก ๋ฆฌ๋ ๋๋ง ๋๋๋ผ๋ ์ฝ์์ ์ฐํ์ง ์์ต๋๋ค.ย
ย
์ด์ฒ๋ผ
useMemo
๋ ๋ฉ๋ชจ์ด์ ์ด์
์ผ๋ก ์ํํ ์ฐ์ฐ์ ๊ฒฐ๊ด๊ฐ์ ๊ธฐ์ตํจ์ผ๋ก์จ ๋ถํ์ํ ๊ณ์ฐ์ ์ต์ํํ๊ณ , ๋ฆฌ๋ ๋๋ง์ ๋ง์ ์ ์์ต๋๋ค.ย
ย
ย
ย
ย
ย
ย
ย
useMemo ๊ฐ์6.3 (์ค์ต1) useMemo ์ฌ์ฉํด๋ณด๊ธฐย