[React] useMemo (React-hooks)

👩‍🎓 useMemo란 뭘까?

컴포넌트가 재 렌더링 될 때 변경사항이 없으면 메모리에서 처음 렌더링 값을 불러오는 것


👩‍🎓 일단 useMemo를 이해하기 위해선 리액트의 렌더링 구조를 알아야한다

함수형 컴포넌트 기준으로 렌더링 구조를 알아보자


👩‍🎓 리액트의 렌더링 구조

컴포넌트 랜더링 → 값 변경 → 변경값을 들고 컴포넌트를 재 호출
→ 컴포넌트 내부 데이터&변수 초기화 → 값 업데이트 완료

이때 값을 업데이트 할 때 변경되지 않는 값 까지 다시 초기화 하는 것이 비 효율적 이라는 판단이 듬

💡 그래서 나온게 useMemo 이다


👩‍🎓 useMemo의 기본코드

const 메모 = useMemo(()=>{
   return 값
},[component]) //useEffect와 같은 논리

설정된 컴포넌트의 값이 업데이트 될 때 마다 메모의 useMemo가 실행

useMemo 실전에서 써보기

👩‍🎓 예제)

const [number,setNumber] = useState(0);
const [isboolean,setIsboolean] = usestate(true)

const showBoolean = {
  return isboolean ? "성공" : "실패"
}

useEffect(()=>{
 console.log("콘솔창 뜹니다")
},[showBoolean])

<input type="number" value={number} onChange={(e)=> setNumber(e.target.value)}/>
<p>현재숫자는? :  {number}</p>
<button onClick={() => setIsboolean(!isboolean)}>boolean변경</button>
<div>{showBoolean}</div>

👩‍🎓 이렇게 있다는 가정, number의 값을 증가 시킬려고 한다.

number의 state를 증가 시켰을 때, 건들이지 않은 showBoolean(이)가
의존되어 있는 useEffect가 실행이 되는 상태이다, 이걸 해결해야하는 문제


👩‍🎓 문제분석

1. number의 값을 증가시키면 state가 변경되면서 재 렌더링이 발생 하는데 재 렌더링 시
   컴포넌트안에 선언된 [number,isboolean,showBlooean] 이런 데이터들이 다 초기화 되기
   때문에 비 효율적 재 렌더링이 발생

2. 이때 객체는 초기화 될때 바로 showBoolean에 저장 되지않고 메모리 주소에
   (캐싱-showBoolean) 저장 했다가 변수에 담겨 showBoolean.name 이렇게 사용 하는데
   컴포넌트가 재 렌더링 시 이전 메모리에 저장 되었던 데이터를 참조해서
   메모리 주소를 (캐싱2-showBoolean)로 새로 덮어쓰고 변수에 저장 함

3. 그렇기 때문에 useEffect로 showBoolean을 의존성 설정 했을 경우 showBoolean의 값이 바뀌지 않아도 캐싱데이터가 바뀌기 때문에 useEffect가 실행이 되는 것이다
   
   

👩‍🎓 어떻게 해결할까?

💡 useEffect에 의존되어 있는 showBoolean을 useMemo로 메모라이즈 시키면 된다

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

export default function App() {
  const [numbers, setNumber] = useState(0);
  const [isboolean, setIsboolean] = useState(true);
  
  const showBoolean = useMemo(() => {
    return isboolean ? "성공" : "실패";
  }, [isboolean]);
  
  useEffect(() => {
    console.log("콘솔창 뜹니다");
  }, [showBoolean]);
  
  //이렇게 showBoolean을 useMemo로 만들어 버리면 input에서 onChange 할 때 state가 바뀌어도 
  console이 찍히지 않는다. 왜냐하면 showBoolean에 걸려있는 isboolean이 안바뀌기 때문이다.
  
  return (
    <div>
      <input
        type="number"
        value={numbers}
        onChange={(e) => setNumber(e.target.value)}
      />
      <p>현재숫자는? : {numbers}</p>
      <button onClick={() => setIsboolean(!isboolean)}>boolean변경</button>
      <div>{showBoolean}</div>
    </div>
  );
}

이렇게 바꿔주면 컴포넌트가 재 렌더링 되도 useMemo가 가지고 있는 값이 바뀌지 않아
useEffect가 실행되지 않는다.

💡결론 : useMemo를 사용하고 싶을 땐 그 식을 useMemo로 감싸면 되고, 콤포넌트가 재랜더링 될 때 의존성 배열에 걸려있는 state가 바뀌지 않는다면 useMemo는 실행되지 않는다

usecallback과의 차이

useMemo는 return 으로 값을 반환 하지만 usecallback은 함수자체를 반환한다.

예시)

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

export default function App() {
  const [ex, setEx] = useState(0);
  const [why, setWhy] = useState(0);

  // useCallback 이 () => {console.log(why)} 라는 함수를 반환한다.
  const useCallbackReturn = useCallback(() => {
    console.log(why);
  }, [ex]);

  // useCallback 이 담겨있는 함수를 실행
  useCallbackReturn();

  return (
    <>
      <button onClick={() => setEx((curr) => curr + 1)}>X</button>
      <button onClick={() => setWhy((curr2) => curr2 + 1)}>Y</button>
    </>
  );
}

ex가 변경 됐을 때 useCallbackReturn이 실행되어 console에 why가 찍힌다는 가정

그 뜻은 두번째 버튼 setWhy를 담당하는 버튼을 아무리 눌러도
usecallbackReturn 함수에 담긴 console.log(why) 의 값은 초기값에서 변하지 않는다 (0)

하지만 setEx를 담당하는 버튼을 누르는 즉시 업데이트 된 why의 값을 반환한다.