๐Ÿ“ˆ React.memo

๊น€์ฒ ์ค€ยท2022๋…„ 2์›” 14์ผ
0

REACT

๋ชฉ๋ก ๋ณด๊ธฐ
14/33

๐Ÿ˜จ ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค๋ฃจ๊ฒŒ ๋œ๋‹ค.
์ปดํฌ๋„ŒํŠธ๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Š” ๊ฐ€๋” ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง์„ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.

๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ์–ธ์ œ์ธ๊ฐ€?

๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.
1. props๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒฝ์šฐ
2. state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒฝ์šฐ
3. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜๋Š” ๊ฒฝ์šฐ

์ปดํฌ๋„ŒํŠธ์˜ props๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜๊ณ 
state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜๊ณ 
๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์—†๋”ํ•˜๋”๋ผ๋„ ์ž์‹์ปดํฌ๋„ŒํŠธ๋„ ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹ค.

์ปดํฌ๋„ŒํŠธ ์ž์‹ ์˜ props์™€ state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ฆฌ๋ Œ๋”๋ง๋˜๋Š” ํ•„์š”ํ•œ ๋ถ€๋ถ„์ด์ง€๋งŒ ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹คํ•ด์„œ ๋ณ€๊ฒฝ์ด ์—†๋Š” ์ž์‹์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง์ด ๋˜๋Š” ๊ฒƒ์€ ์›น ์„ฑ๋Šฅ์„ ๋Š๋ฆฌ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž.

Parent.js

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [number, setNumber] = useState(0);
  console.log("Parent render");
  return (
    <div>
      <h1>Parent</h1>
      <h2>Parent Number : {number}</h2>
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        Increase
      </button>
      <Child />
      <Child />
      <Child />
    </div>
  );
};

export default Parent;

Child.js

import React from "react";

const Child = ({ number }) => {
  console.log("Child render");
  return (
    <div>
      <h2>Child</h2>
    </div>
  );
};

export default Child;

App.js

import React from "react";
import Parent from "./Parent";

const App = () => {
  return (
    <div>
      <Parent />
    </div>
  );
};

export default App;

Parent์ปดํฌ๋„ŒํŠธ์•ˆ์—๋Š” 3๊ฐœ์˜ Child์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹ค.
์ด ๋•Œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ„์œผ๋กœ์จ number๋ผ๋Š” state๊ฐ’์„ ๋ณ€๊ฒฝํ•  ๋•Œ parent์˜ state๊ฐ’์ด ๋ฐ”๋€Œ๋ฉด Parent ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹ค.

ํ•˜์ง€๋งŒ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š” Child๋„ ๋ฆฌ๋ Œ๋”๋ง๋˜๊ณ  ์žˆ๋‹ค๋Š”์ ์ด๋‹ค.

์ด๋Ÿฐ์‹์œผ๋กœ ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ์˜ state๊ฐ’์ด ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ์ž์‹์ปดํฌ๋„ŒํŠธ๋กœ ๋ฆฌ๋ Œ๋”๋ง์ด ๋˜๊ณ  ์žˆ๋‹ค.

์ง€๊ธˆ ์ž์‹์ปดํฌ๋„ŒํŠธ๊ฐ€ 3๊ฐœ์—ฌ์„œ ๋ณ„๊ฒƒ์ด ์•„๋‹ˆ์ง€๋งŒ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋ณต์žกํ•œ ์ปดํฌ๋„ŒํŠธ ๊ณ„์ธต์„ ์ด๋ฃจ๊ณ  ์žˆ๋‹ค.

์ด ๋•Œ ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹์ปดํฌ๋„ŒํŠธ์™€ ์ƒ๊ด€์—†๋Š” ์ž‘์€ ๋ถ€๋ถ„์ด ๋ฐ”๋€๋‹ค๊ณ  ํ–ˆ์„ ๋•Œ ๊ทธ๊ฒƒ๋•Œ๋ฌธ์— ์ž์‹์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ „๋ถ€ ๋ฆฌ๋ Œ๋”๋ง์ด ๋œ๋‹คํ•˜๋Š” ๊ฒƒ์€ ์—„์ฒญ๋‚œ ๋‚ญ๋น„์ด๋‹ค.

๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ๊ณผ๋„ํ•œ ๋ฆฌ๋ Œ๋”๋ง์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” React.memo๋ผ๋Š” ๊ณ ์ฐจ์ปดํฌ๋„ŒํŠธ(Higher-Order Component)๋ฅผ ์ œ์‹œํ•˜๊ณ  ์žˆ๋‹ค.

๐Ÿ’Š React.memo

React.memo
React.memo๋Š” ๊ณ ์ฐจ์ปดํฌ๋„ŒํŠธ(Higher-Order Component)๋กœ์„œ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ๋ Œ๋”๋งํ•ด๋‚ธ๋‹ค๋ฉด React.memo๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฉ”๋ชจ์ด์ง•ํ•˜๋„๋ก ๋ž˜ํ•‘ํ•˜์—ฌ ๊ฒฝ์šฐ์— ๋”ฐ๋ผ์„œ ์„ฑ๋Šฅ ํ–ฅ์ƒ์„ ์‹œํ‚ฌ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

๋”ฐ๋ผ์„œ ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” React.memo๋กœ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.

์œ„์˜ ์˜ˆ์‹œ๋ฅผ React.memo๋กœ ๊ฐ์‹ธ์ฃผ์ž.

Child.js

import React from "react";

const Child = ({ number }) => {
  console.log("Child render");
  return (
    <div>
      <h2>Child</h2>
      <h3>Child Number : {number}</h3>
    </div>
  );
};

export default React.memo(Child);

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ React.memo๋กœ ๊ฐ์‹ธ์ฃผ๋ฉด Parent ์ปดํฌ๋„ŒํŠธ์˜ state๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด๋„ Child ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜์ง€ ์•Š๋Š”๋‹ค.

Parent์˜ state๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ Parent ์ปดํฌ๋„ŒํŠธ๋งŒ ๋ฆฌ๋ Œ๋”๋ง๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ‘‹ ์ •๋ฆฌ

๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ ๋ณ€ํ™”๊ฐ€ ์—†๋Š” ์ž์‹์ปดํฌ๋„ŒํŠธ์˜ ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ React.memo๋ผ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์•˜๋‹ค.

ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ์˜ ์ค‘์ฒฉ์ด ๋งŽ์ง€ ์•Š๋‹ค๋ฉด ๊ตณ์ด ์ด๋Ÿฌํ•œ ๋ฐฉ๋ฒ•์„ ์จ์ฃผ์ง€ ์•Š์•„๋„ ๋  ๊ฒƒ์ด๋‹ค.

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

์ฐธ์กฐ : ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ

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