리액트 useMemo 사용하기

리액트 useMemo 에 대해서 살펴본다

 

ko.reactjs.org/docs/hooks-reference.html#usememo

Hooks API Reference – React

만들어진 이유

컴포넌트 렌더링시 성능 개선을 하려고 만들어졌다.

 

문서에서 주의할 부분이 하나 있다.

 

useMemo는 성능 최적화를 위해서 사용 할 수는 있지만 

의미상으로 보장이 있다고 생각하지는 말라고 한다. 

 

이 말은 내부적으로 뭔가 성능 향상을 100% 보장할 수 있는 구조는 아니라는 것인데.

그것은 다음에 더 살펴봐야 할 것 같다.

 

굉장히 단순한 예제를 통해서 왜 성능 개선이 되는지 살펴볼 수 있다.

 

useMemo를 적용하기 전의 App.tsx의 코드

import { useState } from 'react'

function Info({ blue, red }) {
  getBlue(blue)
  getRed(red)
  return (
    <div>
      <p>blue {blue}</p>
      <p>red {red}</p>
    </div>
  )
}

function getBlue(value) {
  console.log('get blue')
}
function getRed(value) {
  console.log('get red')
}


function App() {
  const [redValue, setRedValue] = useState(0)
  const [blueValue, setBlueValue] = useState(0)
  function plusBlueValue() {
    setBlueValue(blueValue + 1)
  }
  function plusRedValue() {
    setRedValue(redValue + 1)
  }
  return (
    <div className="App">      
      <br/>
      <button onClick={plusBlueValue}>plus blue value</button>
      <button onClick={plusRedValue}>plus red value</button>
      <br/>
      <Info blue={blueValue} red={redValue}/>
    </div>
  );
}

export default App;

버튼을 눌러본다

getBlue 함수, getRed함수가 모두 호출된다.

 

red 값을 바꿨을때는 getRed 함수만 호출되고

blue 값을 바꿨을때는 getBlue 함수만 호출된다면 성능이 더 좋아질 것이다.

 

필요하지 않은 부분을 호출하지 않았기 때문이다

 

useMemo를 사용하면 바뀐 부분만 호출되도록 할 수 있다.

 

useMemo(() => prop연관함수(props), [props변수이름])

props를 받아서 사용하는 함수(props) , [props변수 이름] 을 작성한다.

useMemo 함수는 void 함수이다. 리턴이 없다.

따로 값을 리턴받아서 할건 없다.

 

 

아래 코드는 완성한 useMemo 예제이다.

import { useCallback, useEffect, useMemo, useState } from 'react'

function Info({ blue, red }: any) {
  useMemo(() => getBlue(blue), [blue])
  useMemo(() => getRed(red), [red])
  // getBlue(blue)
  // getRed(red)
  return (
    <div>
      <p>blue {blue}</p>
      <p>red {red}</p>
    </div>
  )
}

function getBlue(value: any) {
  console.log('get blue')
}
function getRed(value: any) {
  console.log('get red')
}


function App() {
  const [redValue, setRedValue] = useState(0)
  const [blueValue, setBlueValue] = useState(0)
  function plusBlueValue() {
    setBlueValue(blueValue + 1)
  }
  function plusRedValue() {
    setRedValue(redValue + 1)
  }
  return (
    <div className="App">      
      <br/>
      <button onClick={plusBlueValue}>plus blue value</button>
      <button onClick={plusRedValue}>plus red value</button>
      <br/>
      <Info blue={blueValue} red={redValue}/>
    </div>
  );
}

export default App;

 

 

완성한 App.tsx

 

gist.github.com/WooJongSeon/98022d22f425e0ca3299f775ad536924

App.tsx

blue 버튼을 누르자 getBlue 함수만 호출된 것을 알 수 있다.