๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Memoizing Series (useCallback,useMemo,React.memo)

kcj_dev96ยท2022๋…„ 3์›” 23์ผ
0

๋ฆฌ์•กํŠธ

๋ชฉ๋ก ๋ณด๊ธฐ
19/23

ํ‰์†Œ์— ๊ณต๋ถ€๋Š” ํ•ด๋†จ์ง€๋งŒ ํฐ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜์ง€์•Š์•„ ๋ Œ๋”๋ง ์ตœ์ ํ™”์— ํฌ๊ฒŒ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š์•˜๋‹ค.

์ง€๊ธˆ ํ•˜๋Š” ๋ธ”๋กœ๊ทธ ํ”„๋กœ์ ํŠธ๋„ ๋‹ค๋ฅธ ๋Œ€ํ˜• ํ”„๋กœ์ ํŠธ์— ๋น„ํ•˜๋ฉด ํฌ๊ฒŒ ๋ Œ๋”๋ง์— ์•…์˜ํ–ฅ์„ ์ฃผ์ง„ ์•Š์ง€๋งŒ state๊ฐ€ ๋ณต์žกํ•ด์ง€๊ณ  Component์ˆ˜๋„ ๋งŽ์•„์ง„๋งŒํผ ์ตœ์ ํ™”๋ฅผ ํ•ด์ฃผ๋Š” ๊ฒƒ์€ ์•ž์œผ๋กœ์˜ ์ข‹์€ ์Šต๊ด€์ด ๋  ๊ฒƒ ๊ฐ™์•„ ์ตœ์ ํ™”์— ๋Œ€ํ•˜์—ฌ ๋‹ค์‹œ ๋˜์งš๊ณ  ๊ฐ€๋ณด๊ณ ์ž ํ•œ๋‹ค.

Memoizing

Memoization์ด๋ž€ ๊ธฐ์กด์— ์žˆ๋˜ ๊ฐ’(ํ•จ์ˆ˜,๊ฐ์ฒด ๋“ฑ)์„ ์‚ฌ์šฉํ•˜์—ฌ ๋น„์šฉ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋Š” ์ตœ์ ํ™”๊ธฐ์ˆ ์ด๋‹ค.

๊ฐ™์€ input์ด ๋“ค์–ด์™”์„ ๋•Œ ์ƒˆ๋กญ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๊ธฐ์กด์— ์žˆ๋˜ ๊ฐ’์„ ์‚ฌ์šฉํ•œ๋‹ค.
caching๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ memoization์€ ์ตœ์ ํ™”์— ์ดˆ์ ์„ ๋งž์ถ”๊ณ  ์žˆ๋‹ค.

useCallback, useMemo , React.memo์€ memoization์˜ ๊ฐœ๋…๊ณผ ๋น„์Šทํ•˜๋‹ค.

๊ธฐ์กด์— ์žˆ๋˜ ํ•จ์ˆ˜,๊ฐ’,์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋ฐ”๋€Œ์ง€์•Š๋Š”๋‹ค๋ฉด ์ด์ „์— ์žˆ๋˜ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

ํ•˜๋‚˜์”ฉ ์ฐจ๋ก€์ฐจ๋ก€ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.


useCallback

useCallback์„ ๋ณด๊ธฐ์ „์— ๋‹ค์Œ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด๋ณด์ž.

function factory() {
  return (a, b) => a + b;
}
const sum1 = factory();
const sum2 = factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => true

factory๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ๋งŒ๋“ค์–ด๋‚ด๋Š” sum1,sum2์€ ๊ฐ™์€ ํ•จ์ˆ˜๋กœ๋ถ€ํ„ฐ ๋ฐ˜ํ™˜๋œ ํ•จ์ˆ˜์ด์ง€๋งŒ ๋น„๊ต๋ฅผ ํ•ด๋ดค์„ ๋•Œ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋กœ ํŒ๋‹จ๋˜๊ณ  ์žˆ๋‹ค.

์ด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด์˜ ๊ฐœ๋…์„ ๋“ค์—ฌ๋‹ค๋ด์•ผํ•œ๋‹ค.

์œ„ ์˜ˆ์ œ๋ฅผ ์ดํ•ดํ•˜๊ธฐ์œ„ํ•ด ์•Œ์•„์•ผํ•  ๊ฐœ๋…์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
1. ํ•จ์ˆ˜๋Š” ์ผ๊ธ‰๊ฐ์ฒด์ด๋‹ค.์ฆ‰, ํ•จ์ˆ˜๋„ ๊ฐ์ฒด์ด๋‹ค.
2. ๋‘ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ–ˆ์„ ๋•Œ, key,value๊ฐ’์ด ๊ฐ™์•„๋„ ๋‘ ๊ฐ์ฒด๋Š” ๋‹ค๋ฅธ ๊ฐ์ฒด์ด๋‹ค.

const obj1 = { x: 1, y: 2 };
const obj2 = { x: 1, y: 2 };

console.log(obj1 === obj2); //false

1๋ฒˆ ์‚ฌํ•ญ์„ ์„ค๋ช…ํ•˜์ž๋ฉด javascript์˜ ๊ฐ’๋“ค์€ ๋Œ€๋ถ€๋ถ„ ๊ฐ์ฒด๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค.
ํ•จ์ˆ˜ ๋˜ํ•œ ๊ฐ์ฒด๋ผ๊ณ  ์•Œ๊ณ  ์žˆ์œผ๋ฉด ๋œ๋‹ค.

2๋ฒˆ ์‚ฌํ•ญ์€ ์œ„ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด ๋‘ ๊ฐœ๋Š” key,value๊ฐ’์ด ๊ฐ™์€๋ฐ๋„ ๋น„๊ต๋ฅผ ํ•ด๋ดค์„ ๋•Œ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ผ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ ์–ด๋– ํ•œ ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋Š” ๋‹ค๋ฅธ ๊ฐ์ฒด์™€ ๋‹ค๋ฅธ ๊ณ ์œ ํ•œ ๊ฐ’์ด๋ผ๋Š” ๊ฒƒ์ด๋‹ค.

์ถ”๊ฐ€ ์„ค๋ช… : ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์€ ํ‰๊ฐ€๋  ๋•Œ๋งˆ๋‹ค ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. obj1๊ณผ obj2์˜ ๋‚ด์šฉ์€ ๊ฐ™์ง€๋งŒ ๋‹ค๋ฅธ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋œ ๋ณ„๊ฐœ์˜ ๊ฐ์ฒด์ด๋‹ค. ์ฆ‰ ,obj1๊ณผ obj2์˜ ์ฐธ์กฐ ๊ฐ’์€ ์ „ํ˜€ ๋‹ค๋ฅธ ๊ฐ’์ด๋‹ค.

๋”ฐ๋ผ์„œ ์ฒ˜์Œ์— ๋ณธ ์˜ˆ์ œ๋ฅผ ๋‹ค์‹œ ์‚ดํŽด๋ณด๋ฉด sum1()ํ•จ์ˆ˜์™€ sum2()ํ•จ์ˆ˜๊ฐ€ ๋‹ค๋ฅด๋‹ค๋Š” ๊ฒƒ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๋‹ค์Œ์œผ๋กœ React์˜ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด๋ณด์ž.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const changeValue = (e) => setValue(e.target.value);

  return (
    <div>
      <input value={value} onChange={changeValue} />
    </div>
  );
};

export default App;

์œ„ ์˜ˆ์ œ์—์„œ input์ด onChange์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค changeValue ํ•จ์ˆ˜๊ฐ€ ์ƒˆ๋กœ ์ƒ์„ฑ๋˜๊ณ  ์žˆ๋‹ค.

onChange๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ์ƒ์„ฑ๋˜๋Š” changeValue๋Š” ๊ฐ™์€ ํ•จ์ˆ˜์ผ๊นŒ? ๋‹ค๋ฅธ ํ•จ์ˆ˜์ผ๊นŒ?

๋‚ด๋ถ€์ ์œผ๋กœ ๋‹ค๋ฅธ ํ•จ์ˆ˜๊ฐ์ฒด์ด๋‹ค.

ํ•˜์ง€๋งŒ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ์ƒ์„ฑ๋˜๋Š” ํ•จ์ˆ˜๋Š” ๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

๋•Œ๋ฌธ์— ์ฒ˜์Œ ํ•œ๋ฒˆ ์ƒ์„ฑํ•œ ํ•จ์ˆ˜๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•ด๋„ ๋œ๋‹ค๋Š” ์ด์•ผ๊ธฐ์ด๋‹ค.

์ด๋Ÿด ๋•Œ useCallback์„ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

useCallback

import React, { useState, useCallback } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const changeValue = useCallback((e) => setValue(e.target.value), []);

  return (
    <div>
      <input value={value} onChange={changeValue} />
    </div>
  );
};

export default App;

์œ„์™€ ๊ฐ™์ด useCallback์„ ํ•ด๋‹น ํ•จ์ˆ˜์— ์‚ฌ์šฉํ•ด์ฃผ๋ฉด onChange ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ ํ•œ๋ฒˆ changeValue ํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๊ทธ ๋’ค๋กœ changeValue๋ฅผ ์ƒˆ๋กœ ์ƒ์„ฑํ•˜์ง€ ์•Š๋Š”๋‹ค.

์—ฌ๊ธฐ์„œ ํ—ท๊ฐˆ๋ฆฌ์ง€ ์•Š์•„์•ผํ•˜๋Š”์ ์ด ํ•จ์ˆ˜๊ฐ€ ์ƒˆ๋กœ ์ƒ์„ฑ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ด ํ•จ์ˆ˜๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. ๋‹จ์ง€ ๊ธฐ์กด์— ์ฒ˜์Œ ๋งŒ๋“ค์—ˆ๋˜ ํ•จ์ˆ˜๋ฅผ ๊ธฐ์–ตํ•˜์—ฌ ๊ณ„์† ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

useCallback์˜ ํ˜•ํƒœ
useCallback(callbackFuncition,[dependency])

useCallback์€ useEffect์™€ ๋น„์Šทํ•œ ํ˜•ํƒœ์ด๋‹ค.

์ฒซ๋ฒˆ์งธ ์ธ์ž์—๋Š” ์‹คํ–‰ํ•˜๊ณ ์ž ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•˜๊ณ  ๋‘๋ฒˆ์งธ ์ธ์ž์ธ dependency ๋ฐฐ์—ด์— ํ• ๋‹นํ•˜๋Š” value์˜ ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚  ๋•Œ๋งˆ๋‹ค callbackFunction์„ ์ƒ์„ฑํ•ด์ค€๋‹ค.

ํ•˜์ง€๋งŒ ์ฃผ์˜ํ•  ๊ฒƒ์€ ๋ชจ๋“  ํ•จ์ˆ˜์— useCallback์„ wrappingํ•˜๋Š” ๊ฒƒ์€ ๊ณ ๋ คํ•ด๋ด์•ผํ•  ์ƒํ™ฉ์ผ ์ˆ˜ ์žˆ๋‹ค.

๋•Œ๋กœ๋Š” useCallback์œผ๋กœ wrappingํ•œ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด ๋ Œ๋”๋ง๋  ๋•Œ๋งˆ๋‹ค ๋ถˆ๋Ÿฌ์ง€๋Š” ๊ฒƒ์ด ๋น„์šฉ์ด ๋” ํด ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ์—์„œ๋„ ๋ Œ๋”๋งํ•  ๋•Œ ์žฌ์ƒ์„ฑ๋˜๋Š” ๊ฐ’์˜ ๋น„์šฉ์ด ํด ๋•Œ ์‚ฌ์šฉํ•˜๋ผ๊ณ  ๋‚˜์™€์žˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•˜์ง€์•Š๊ณ  element๋“ค์ด ๋ณต์žกํ•˜์ง€ ์•Š๋‹ค๋ฉด useCallback ์ฐจ๋ผ๋ฆฌ ์“ฐ์ง€ ์•Š๋Š” ๊ฒƒ์ด ๋‚˜์„ ์ˆ˜ ์žˆ๋‹ค.

๋•Œ๋ฌธ์— useCallback์„ ์‚ฌ์šฉํ•  ๋•Œ ๋น„์šฉ์ธก๋ฉด์„ ๊ณ ๋ คํ•ด๋ณด๊ณ  ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜์ž.


useMemo

useMemo๋Š” useCallback๊ณผ ๋น„์Šทํ•˜๋‹ค.
useCallback์€ Memoized function์„ ๋ฐ˜ํ™˜ํ•˜์ง€๋งŒ
useMemo๋Š” Memoized value๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค.

๋จผ์ € ๋‹ค์Œ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด๋ณด์ž.

import React, { useState } from "react";

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

export default App;

๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค Todo๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋Š” UI์™€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ์ˆซ์ž๋ฅผ 1์”ฉ ์ฆ๊ฐ€์‹œ์ผœ์ฃผ๋Š” UI๊ฐ€ ์žˆ๋‹ค.

์ด ๋•Œ ์ˆซ์ž๋ฅผ ์ฆ๊ฐ€์‹œ์ผœ์ฃผ๋Š” UI์˜ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด 10์–ต๋ฒˆ์ด๋‚˜ ๊ณ„์‚ฐ์„ ํ•˜๋Š”expensiveCalculation ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.

ํ•˜์ง€๋งŒ ์œ„ App ์ปดํฌ๋„ŒํŠธ๋Š” todos๋ผ๋Š” state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋„ ๋ฆฌ๋ Œ๋”๋ง์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— Todo UI Button์„ ํด๋ฆญํ•˜์—ฌ๋„ expensiveCalculation ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ์ด ๋œ๋‹ค.

์ด๋Š” ์„ฑ๋Šฅ์— ์•ˆ ์ข‹์€ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ตœ์ ํ™”๊ฐ€ ํ•„์š”ํ•˜๋‹ค.
์ด ๋•Œ ํ•„์š”ํ•œ ํ›…์ด useMemo์ด๋‹ค.

์œ„ ์˜ˆ์ œ์— useMemo๋ฅผ ์ ์šฉํ•ด๋ณด์ž.

import React, { useState ,useMemo} from "react";

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);
  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

export default App;

์œ„์™€ ๊ฐ™์ด ์ ์šฉํ•ด์ค€๋‹ค๋ฉฐ todo UI ๋ฒ„ํŠผ์ด ํด๋ฆญ๋˜์–ด๋„ expensiveCalculation์ด ํ˜ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค.

useMemo์˜ ํ˜•ํƒœ
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback๊ณผ ๋น„์Šทํ•˜๊ฒŒ ์ฒซ๋ฒˆ์งธ ์ธ์ž์—๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•ด์ฃผ๊ณ  ๋‘๋ฒˆ์งธ์ธ์ž์—๋Š” dependency๋ฐฐ์—ด์„ ํ• ๋‹นํ•ด์ค€๋‹ค.

dependency๊ฐ’์ด ๋ฐ”๋€Œ์ง€ ์•Š์œผ๋ฉด computeExpensiveValue๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค.

useMemo๋Š” useCallback๊ณผ ๋น„์Šทํ•˜๋‚˜ ์ฐจ์ด์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
useCallback๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜์ธ ํ•จ์ˆ˜๋ฅผ memoizingํ•˜๋Š” ๊ฒƒ์ด๊ณ 
useMemo์€ ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๋•Œ๋ฌธ์— ์ด๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํ—ท๊ฐˆ๋ฆฌ์ง€ ์•Š๋„๋ก ์ฃผ์˜๊นŠ๊ฒŒ ์‚ดํŽด๋ณด๊ณ  ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

useMemo ๋˜ํ•œ ๋น„์‹ผ ์—ฐ์‚ฐ์ด ์•„๋‹ˆ๋ผ๋ฉด ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์„ ๊ธฐ์–ตํ•ด๋‘์ž.


React.memo

React.memo๋Š” ์ „์— ํฌ์ŠคํŒ…์„ ํ•ด๋‘”๊ฒƒ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ„๋žตํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด
์ปดํฌ๋„ŒํŠธ๋ฅผ memoizationํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์ฆ‰, ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€ํ™”๊ฐ€ ์—†๋‹ค๋ฉด ๋ฆฌ๋ Œ๋”๋ง์ด ๋˜์ง€ ์•Š๋„๋ก ํ•ด์ค„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ์šฐ์— ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์•ˆ์— ์ˆ˜ ์ฒœ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹คํ•˜์˜€์„ ๋•Œ , ๋ถ€๋ชจ์˜ state๊ฐ’์ด ๋ฐ”๋€Œ๋ฉด ์ˆ˜์ฒœ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋  ๊ฒƒ์ด๋‹ค.

ํ•˜์ง€๋งŒ ๋ถ€๋ชจ state์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š” ์ฆ‰, ๋ถ€๋ชจ state๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ด์ „ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ทธ๋Œ€๋กœ ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด React.memo์ด๋ฉฐ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.


import React from "react"

export default fuction React.memo(ChildComponent(){
	return <div>Child</div>
})

์ปดํฌ๋„ŒํŠธ๋ฅผ ์œ„์ฒ˜๋Ÿผ React.memo๋กœ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.


์ •๋ฆฌ

React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ Memoizingํ•˜๋Š” ์ฃผ์š” ๋ฐฉ๋ฒ•๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.
๋ถˆํ•„์š”ํ•˜๊ฒŒ Memoizingํ•˜๋Š” ๊ฒƒ๋„ ๊ณ ๋ คํ•ด๋ด์•ผํ•  ์‚ฌํ•ญ์ด์ง€๋งŒ ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๊ฐ€ ํด ๋•Œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งŽ์•„์ง€๊ณ  ํ•จ์ˆ˜ํ˜ธ์ถœ๋Ÿ‰์ด ๋งŽ์•„์ง€๊ณ  ๋น„์‹ผ ์—ฐ์‚ฐ๊ฐ’์ด ๋งŽ์•„์ ธ ์ด๋“ค์ด ๋ชจ๋‘ ํ•ฉ์ณ์งˆ ๋•Œ ๋น„์šฉ์ด ๊ฝค ์ปค์ง€๊ฒŒ ๋œ๋‹ค.

๊ทธ๋Ÿฌ๋ฏ€๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ ์ด์ ์„ ๊ณ ๋ คํ•˜์—ฌ Memozing์˜ ์—ฌ๋ถ€๋ฅผ ์ž˜ ํŒ๋‹จํ•ด๋ณด์ž.

Reference

profile
๊ฐœ๋ฐœ์ž์—ฌ์„œ ํ–‰๋ณตํ•œ Jev ๐Ÿ˜™ FE DEVELOPER JEV

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