useMemo

목차

 

 

useMemo

useMemo는 랜더링 성능을 최적화하기 위한 hook이다.

React는 Virtual Dom이란 가상의 객체를 랜더링 하고 이전 랜더링 결과와 비교 후,달라진 곳만 랜더링 한다.

React란

이때 memo는 memo 내 설정값이(deps) 변하지 않는 이상

리랜더링을 할 때 달라진 부분이 있는지 확인하지 않고 그대로 사용하게 만들어

리랜더링을 최적화시킨다.

코드

// App.js

import {useState} from 'react';
import CatInfo from "./CatInfo";

export default  function App () {
  const [count, setCount] = useState(0);
  const [age, setAge] = useState(1);
  
  function plusCOunt() {
    setCount(count+1)
  }

  function plusAge() {
    setAge(age+1)
  }

  return (
    <div className="App">
      <CatInfo
        name="GoYamMi"
        age= {age}
      />
      {console.log("reRender")}
      <button onClick={plusCOunt}>카운트: {count}</button><br/>
      <button onClick={plusAge}>나이: {age}</button>
    </div>
  );
};

 

// CatInfo.js
import React, { useMemo } from 'react'

export default function CatInfo({ name, age }) {
  
  function checkRerender(){
    console.log("isThis Rerender?");
  }

  const memo = useMemo(checkRerender, [name, age]);

  return (
    <div>
      <div>이름: {name}</div>
      <div>나이: {age}</div>
    </div>
  );
}

분석

// CatInfo.js
import React, { useMemo } from 'react'

export default function CatInfo({ name, age }) {
  
  function checkRerender(){
    console.log("isThis Rerender?");
  }

  const memo = useMemo(checkRerender, [name, age]);

  return (
    <div>
      <div>이름: {name}</div>
      <div>나이: {age}</div>
    </div>
  );
}

useMemo를 checkRerender 함수에 걸어놨다.

뒤에 인자인 name이나 age가 변경되지 않는다면

저 함수는 실행되지 않을 거고

name, age 중 하나가 변경된다면 함수가 실행될 것이다.

// App.js

import {useState} from 'react';
import CatInfo from "./CatInfo";

export default  function App () {
  const [count, setCount] = useState(0);
  const [age, setAge] = useState(1);
  
  function plusCOunt() {
    setCount(count+1)
  }

  function plusAge() {
    setAge(age+1)
  }

  return (
    <div className="App">
      <CatInfo         // CatInfo로 name과 age 두개를 넘겨준다
        name="GoYamMi"
        age= {age}
      />
      {console.log("reRender")} // 리랜더링 확인용 출력
      <button onClick={plusCOunt}>카운트: {count}</button><br/> // 리랜더링 트리거용 버튼
      <button onClick={plusAge}>나이: {age}</button> // memo 인자 변경용 버튼
    </div>
  );
};

해당 결과를 살펴보기 위해,

하나는 리 랜더링용 count증가 버튼을,

하나는 memo 인자 증가 버튼을 만들었다.

맨 처음 랜더링 될 때는 모든 함수가 랜더링 됨으로

출력 두 가지가 모두 됨을 지켜볼 수 있고,

그다음 카운트를 계속 누를 때는 memo가 실행되지 않아

출력 reRender 하나만 되는 걸 알 수 있다.

그다음 memo인자를 증가시키니

reRender용 출력과

memo 랜더링 확인용 출력 둘 다 되는 걸 확인할 수 있다.

useEffect랑 차이점

React: useEffect vs useMemo vs useState

해당 글을 보면

useMemo는 랜더링 전,

useEffect는 랜더링 후에 발생한다고 적혀있다.

 

useMemo의 구조를 생각해도 맞는 말이다.

 

즉, useEffect는 랜더링 후에 발생하는 것이기 때문에

랜더링 성능을 효율적으로 하기 힘들다.

useMemo는 랜더링 과정을 생략하게 해 주는 거라 직접적으로 영향을 준다.

끝

와 진짜 useEffect랑 차이점은

내내 찝찝해하면서 뭔 차이지 하면서 그냥 글 올리려다가

계속 생각해서 떠올렸다.