React Hook - 최적화 (useMemo)

• React.memo : 컴포넌트를 메모이제이션
• useCallback : 함수자체를 메모이제이션
• useMemo: value에 대한 메모이제이션
  • (함수가 리턴하는 값 or 값 자체)

// as-is
const value = 반환할 함수();

// to-be
const value = useMemo(() => {
  return 반환할 함수()
}, [dependencyArray])

• 특정한 값이 변경될 때 메모이제이션을 다시 수행하겠다.

📁 components / HeavyConponent

import React, { useMemo, useState } from 'react'

function HeavyConponent() {
  const [count, setCount] = useState(0)

  const heavyWork = () => {
    for(let i=0; i<2000000000; i++) {}
    return 100
  }

  const value = useMemo(() => heavyWork(), [])
  console.log(`value는 ${value}입니다`)

  return (
    <>
      <p>나는 엄청 무거운 컴포넌트야!</p>
      <button
        onClick={() => {
          setCount(count + 1)
        }}>
        누르면 아래 count가 올라가요
      </button>
      <br />
      {count}
    </>
  )
}

export default HeavyConponent

예제

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

function ObjectComponent() {
  const [isAlive, setIsAlive] = useState(true);
  const [uselessCount, setUselessCount] = useState(0);

  const me = {
    name: "Ted Chang",
    age: 21,
    isAlive: isAlive ? "생존" : "사망",
  };

  useEffect(() => {
    console.log("생존여부가 바뀔 때만 호출해주세요!");
  }, [me]);

  return (
    <>
      <div>
        내 이름은 {me.name}이구, 나이는 {me.age}야!
      </div>
      <br />
      <div>
        <button
          onClick={() => {
            setIsAlive(!isAlive);
          }}
        >
          누르면 살았다가 죽었다가 해요
        </button>
        <br />
        생존여부 : {me.isAlive}
      </div>
      <hr />
      필요없는 숫자 영역이에요!
      <br />
      {uselessCount}
      <br />
      <button
        onClick={() => {
          setUselessCount(uselessCount + 1);
        }}
      >
        누르면 숫자가 올라가요
      </button>
    </>
  );
}

export default ObjectComponent;

• 아래 버튼을 눌러도 위 버튼의 콘솔이 출력된다

  const me = useMemo(() => {
    return {
      name: "Ted Chang",
      age: 21,
      isAlive: isAlive ? "생존" : "사망",
    }
  }, [isAlive])