[React] useMemo๋ž€?

๊น€์ง„์˜ยท2022๋…„ 11์›” 18์ผ
25

ReactJS

๋ชฉ๋ก ๋ณด๊ธฐ
5/8
post-thumbnail

๐Ÿ“‹ useMemo๋ž€?

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๋ฅผ ๋‹ค์‹œ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋˜์–ด์žˆ๋Š” ๊ณ„์‚ฐ๋œ ๊ฐ’์„ ๊ฐ€์ ธ์™€ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.


๐Ÿ“Œ 1. useMemo์˜ ๊ตฌ์กฐ

const value = useMemo(() => {
    return calculate();
},[item])

useMemo๋Š” useEffect์ฒ˜๋Ÿผ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ์ฝœ๋ฐฑ ํ•จ์ˆ˜, ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ ์˜์กด์„ฑ ๋ฐฐ์—ด(dependancyArray)์„ ๋ฐ›๋Š”๋‹ค.

์˜์กด์„ฑ ๋ฐฐ์—ด ์•ˆ์—์žˆ๋Š” ๊ฐ’์ด ์—…๋ฐ์ดํŠธ ๋  ๋•Œ์—๋งŒ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋‹ค์‹œ ํ˜ธ์ถœํ•˜์—ฌ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋œ ๊ฐ’์„ ์—…๋ฐ์ดํŠธ ํ•ด์ค€๋‹ค.

๋งŒ์•ฝ ๋นˆ ๋ฐฐ์—ด์„ ๋„ฃ๋Š”๋‹ค๋ฉด useEffect์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋งˆ์šดํŠธ ๋  ๋•Œ์—๋งŒ ๊ฐ’์„ ๊ณ„์‚ฐํ•˜๊ณ  ๊ทธ ์ดํ›„๋ก  ๊ณ„์† memoization๋œ ๊ฐ’์„ ๊บผ๋‚ด์™€ ์‚ฌ์šฉํ•œ๋‹ค.


๐Ÿ“Œ 2. useMemo ์˜ˆ์ œ 1

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๊ฐ€ ์ •๋ง ๋น›์„ ๋ฐœํ•˜๋Š” ์ƒํ™ฉ์€ ๋”ฐ๋กœ์žˆ๋‹ค.
๋‹ค์Œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•จ๊ป˜ ์‚ดํŽด๋ณด์ž.


๐Ÿ“Œ 3. useMemo ์˜ˆ์ œ 2


(์ขŒ์ธก ๋ฐ”๋ฅผ ๋•ก๊ฒจ ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)

useEffect์˜ ์˜์กด์„ฑ ๋ฐฐ์—ด์— location์„ ๋„ฃ์—ˆ๋Š”๋ฐ number state๋ฅผ ๋ณ€๊ฒฝํ•ด๋„ useEffect๊ฐ€ ์‹คํ–‰๋œ๋‹ค.

๊ทธ ์ด์œ ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด๋Š” ์›์‹œ ํƒ€์ž…๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ๊ฐ’์ด ์ €์žฅ๋  ๋•Œ ์ฃผ์†Œ ๊ฐ’์œผ๋กœ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ์•กํŠธ์—์„  number state๊ฐ€ ๋ฐ”๋€Œ๋ฉด App ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌํ˜ธ์ถœ๋˜๋ฉด์„œ location์˜ ์ฃผ์†Œ๊ฐ’์ด ๋ณ€๊ฒฝ์ด ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— location์ด ๋ณ€๊ฒฝ์ด ๋˜์—ˆ๋‹ค๊ณ  ์ธ์‹์„ ํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ๋„ useMemo ํ›…์„ ํ†ตํ•ด ์ด๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค.

์œ„ ์‹์—์„œ ์ฃผ์„์„ ํ†ตํ•ด 1๋ฒˆ location๊ณผ 2๋ฒˆ location์„ ๊ตฌ๋ถ„ํ•ด๋†จ์œผ๋‹ˆ ๋‘๊ฐœ๋ฅผ ๋ฒˆ๊ฐˆ์•„๊ฐ€๋ฉฐ ์‚ฌ์šฉํ•ด๋ณด๋ฉด ์–ด๋–ค ์ฐจ์ด๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 9์›” 2์ผ

์ž˜ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2024๋…„ 1์›” 26์ผ

์ž˜ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ