useMemo
๋ ๋ฆฌ์กํธ์์ ์ปดํฌ๋ํธ์ ์ฑ๋ฅ์ ์ต์ ํ ํ๋๋ฐ ์ฌ์ฉ๋๋ ํ
์ด๋ค.
useMemo
์์ memo๋ memoization์ ๋ปํ๋๋ฐ ์ด๋ ๊ทธ๋๋ก ํด์ํ๋ฉด โ๋ฉ๋ชจ๋ฆฌ์ ๋ฃ๊ธฐโ๋ผ๋ ์๋ฏธ์ด๋ฉฐ ์ปดํจํฐ ํ๋ก๊ทธ๋จ์ด ๋์ผํ ๊ณ์ฐ์ ๋ฐ๋ณตํด์ผ ํ ๋, ์ด์ ์ ๊ณ์ฐํ ๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํจ์ผ๋ก์จ ๋์ผํ ๊ณ์ฐ์ ๋ฐ๋ณต ์ํ์ ์ ๊ฑฐํ์ฌ ํ๋ก๊ทธ๋จ ์คํ ์๋๋ฅผ ๋น ๋ฅด๊ฒ ํ๋ ๊ธฐ์ ์ด๋ค.
์ฝ๊ฒ ๋งํด ๋์ผํ ๊ฐ์ ๋ฐํํ๋ ํจ์๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ํธ์ถํด์ผํ๋ค๋ฉด ์ฒ์ ๊ฐ์ ๊ณ์ฐํ ๋ ํด๋น ๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํด ํ์ํ ๋๋ง๋ค ๋ค์ ๊ณ์ฐํ์ง ์๊ณ ๋ฉ๋ชจ๋ฆฌ์์ ๊บผ๋ด์ ์ฌ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
๋ฆฌ์กํธ์์ ํจ์ํ ์ปดํฌ๋ํธ๋ ๋ ๋๋ง => ์ปดํฌ๋ํธ ํจ์ ํธ์ถ => ๋ชจ๋ ๋ด๋ถ ๋ณ์ ์ด๊ธฐํ์ ์์๋ฅผ ๊ฑฐ์น๋ค.
์์์ ํจ๊ป ์ดํด๋ณด์.
function Component() {
const value = calculate();
return <div>{value}</div>
}
function calculate() {
return 10;
}
์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋๋ง๋ค value๋ผ๋ ๋ณ์๊ฐ ์ด๊ธฐํ๋๋ค.
์ฆ, ๋ ๋๋ง ๋ ๋๋ง๋ค calculate ํจ์๊ฐ ๋ถํ์ํ๊ฒ ์ฌํธ์ถ๋๋ค๋ ๊ฒ์ธ๋ฐ ๋ง์ฝ calculate๊ฐ ๋ฌด๊ฒ๊ณ ๋ณต์กํ ํจ์๋ผ๋ฉด ๋งค์ฐ ๋นํจ์จ์ ์ผ ๊ฒ์ด๋ค.
๋๋ฌธ์ ์ฐ๋ฆฌ๋ useMemo
ํ
์ ์ฌ์ฉํ๋ ๊ฒ์ธ๋ฐ useMemo
๋ฅผ ์ฌ์ฉํ๋ฉด ๋ ๋๋ง => ์ปดํฌ๋ํธ ํจ์ ํธ์ถ => memoize๋ ํจ์ ์ฌ์ฌ์ฉํ๋ ์์๋ฅผ ๊ฑฐ์น๋ค.
์ด๋ ๊ฒ ๋๋ฉด calculate ํจ์๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ์คํํ ํ์๊ฐ ์๊ฒ ๋๋ค.
useMemo
๋ ์์ ๋งํ๋ฏ์ด ์ฒ์์ ๊ณ์ฐ๋ ๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํด ์ปดํฌ๋ํธ๊ฐ ๊ณ์ ๋ ๋๋ง๋์ด๋ calculate๋ฅผ ๋ค์ ํธ์ถํ์ง ์๊ณ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋์ด์๋ ๊ณ์ฐ๋ ๊ฐ์ ๊ฐ์ ธ์ ์ฌ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
const value = useMemo(() => {
return calculate();
},[item])
useMemo
๋ useEffect
์ฒ๋ผ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์ฝ๋ฐฑ ํจ์, ๋ ๋ฒ์งธ ์ธ์๋ก ์์กด์ฑ ๋ฐฐ์ด(dependancyArray)์ ๋ฐ๋๋ค.
์์กด์ฑ ๋ฐฐ์ด ์์์๋ ๊ฐ์ด ์ ๋ฐ์ดํธ ๋ ๋์๋ง ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ค์ ํธ์ถํ์ฌ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋ ๊ฐ์ ์ ๋ฐ์ดํธ ํด์ค๋ค.
๋ง์ฝ ๋น ๋ฐฐ์ด์ ๋ฃ๋๋ค๋ฉด useEffect
์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ง์ดํธ ๋ ๋์๋ง ๊ฐ์ ๊ณ์ฐํ๊ณ ๊ทธ ์ดํ๋ก ๊ณ์ memoization๋ ๊ฐ์ ๊บผ๋ด์ ์ฌ์ฉํ๋ค.
import { useState } from "react";
const hardCalculate = (number) => {
console.log("์ด๋ ค์ด ๊ณ์ฐ!");
for (let i = 0; i < 99999999; i++) {} // ์๊ฐํ๋ ์๊ฐ
return number + 10000;
};
const easyCalculate = (number) => {
console.log("์ฌ์ด ๊ณ์ฐ!");
return number + 1;
};
function App() {
const [hardNumber, setHardNumber] = useState(1);
const [easyNumber, setEasyNumber] = useState(1);
const hardSum = hardCalculate(hardNumber);
const easySum = easyCalculate(easyNumber);
return (
<div>
<h3>์ด๋ ค์ด ๊ณ์ฐ๊ธฐ</h3>
<input
type="number"
value={hardNumber}
onChange={(e) => setHardNumber(parseInt(e.target.value))}
/>
<span> + 10000 = {hardSum}</span>
<h3>์ฌ์ด ๊ณ์ฐ๊ธฐ</h3>
<input
type="number"
value={easyNumber}
onChange={(e) => setEasyNumber(parseInt(e.target.value))}
/>
<span> + 1 = {easySum}</span>
</div>
);
}
export default App;
์ ์์ ์ ์ด๋ ค์ด ๊ณ์ฐ๊ธฐ์ ์ฌ์ด ๊ณ์ฐ๊ธฐ๊ฐ ์๋ค.
์ด๋ ค์ด ๊ณ์ฐ๊ธฐ๋ ๋ฐ๋ณต๋ฌธ์ 99999999๋ฒ ๋๋ฆฌ๊ณ ๊ฐ์ ๋ฐํํ๊ธฐ ๋๋ฌธ์ ์ซ์๋ฅผ ๋ณ๊ฒฝํ๋ฉด ๋๋ฅด๋ฉด 1์ด ์ ๋์ ๋๋ ์ด๋ฅผ ๊ฑฐ์น ํ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ค.
์ฌ์ง์ด ์ฌ์ด ๊ณ์ฐ๊ธฐ์ ๊ฐ์ ๋ณ๊ฒฝํด๋ 1์ด ์ ๋์ ๋๋ ์ด๋ฅผ ๊ฑฐ์น ํ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ค.
๊ทธ ์ด์ ๋ ์ฌ์ด ๊ณ์ฐ๊ธฐ์ input๊ฐ์ ๋ณ๊ฒฝํ๋ฉด ํจ์ํ ์ปดํฌ๋ํธ์ธ App์ด ๋ฆฌ๋ ๋๋ง๋๋๋ฐ ์ด ๋, ์์์ ๋งํ๋ฏ ๋ด๋ถ์ ๋ณ์๋ค์ด ์ด๊ธฐํ๋๊ธฐ ๋๋ฌธ์ hardCalculate๊ฐ ๋ค์ ์คํ๋๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋ ๋ค๋ฉด ์ด์ useMemo
๋ฅผ ํตํด ์ด๋ฅผ ๋ฐฉ์งํด๋ณด์.
const hardSum = useMemo(() => {
return hardCalculate(hardNumber);
}, [hardNumber]);
const easySum = easyCalculate(easyNumber);
์ด์ฒ๋ผ useMemo
์ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฃ๊ณ , ์์กด์ฑ ๋ฐฐ์ด ์์ hardNumber๋ฅผ ๋ฃ์ด hardNumber ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋์๋ง ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋๊ฒ ํ๋ฉด ๋๋ค.
ํ์ง๋ง ๋ฆฌ์กํธ์์ useMemo
๊ฐ ์ ๋ง ๋น์ ๋ฐํ๋ ์ํฉ์ ๋ฐ๋ก์๋ค.
๋ค์ ์์ ๋ฅผ ํตํด ํจ๊ป ์ดํด๋ณด์.
(์ข์ธก ๋ฐ๋ฅผ ๋ก๊ฒจ ์ฝ๋๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.)
useEffect
์ ์์กด์ฑ ๋ฐฐ์ด์ location์ ๋ฃ์๋๋ฐ number state๋ฅผ ๋ณ๊ฒฝํด๋ useEffect๊ฐ ์คํ๋๋ค.
๊ทธ ์ด์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฒด๋ ์์ ํ์ ๊ณผ๋ ๋ค๋ฅด๊ฒ ๊ฐ์ด ์ ์ฅ๋ ๋ ์ฃผ์ ๊ฐ์ผ๋ก ์ ์ฅ๋๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋ฆฌ์กํธ์์ number state๊ฐ ๋ฐ๋๋ฉด App ์ปดํฌ๋ํธ๊ฐ ์ฌํธ์ถ๋๋ฉด์ location์ ์ฃผ์๊ฐ์ด ๋ณ๊ฒฝ์ด ๋์๊ธฐ ๋๋ฌธ์ location์ด ๋ณ๊ฒฝ์ด ๋์๋ค๊ณ ์ธ์์ ํ๋ค.
์ฌ๊ธฐ์๋ useMemo
ํ
์ ํตํด ์ด๋ฅผ ๋ฐฉ์งํ ์ ์๋ค.
์ ์์์ ์ฃผ์์ ํตํด 1๋ฒ location๊ณผ 2๋ฒ location์ ๊ตฌ๋ถํด๋จ์ผ๋ ๋๊ฐ๋ฅผ ๋ฒ๊ฐ์๊ฐ๋ฉฐ ์ฌ์ฉํด๋ณด๋ฉด ์ด๋ค ์ฐจ์ด๊ฐ ์๋์ง ํ์ธํ ์ ์๋ค.
์ ์ฝ์์ต๋๋ค!