React hooks란?

React 16.8에서 추가된 새로운 기능입니다.
클래스를 쓰지 않아도, state 등의 React의 기능을, 함수 컴퍼넌트로 간단하게 취급할 수 있게 되었습니다.

React hooks를 기초로부터 이해한다(useState편)

React hooks를 기초로부터 이해한다(useEffect편)

React hooks를 기초로부터 이해한다(useContext편)

React hooks를 기초로부터 이해한다(useReducer편)

React hooks를 기초로부터 이해한다(useCallback편)

React hooks를 기초로부터 이해한다 (useMemo편) 지금 여기

React hooks를 기초에서 이해 (useRef편)

↓React.memo, useCallBack, useMemo에 관한 기사이므로, 좋으면 참고로 해 주세요↓
【React】 더 빨라진다! ? 퍼포먼스 최적화에 도전!

useMemo란?

useMemo는 함수의 결과를 보관 유지하기 위한 훅으로, 몇회 해도 결과가 같은 경우의 값등을 보존(메모화) 해, 거기로부터 값을 재취득합니다.
불필요한 재계산을 건너뛰기 때문에 성능 향상을 기대할 수 있습니다.
useCallback은 함수 자체를 기록하지만 useMemo는 함수의 결과를 유지합니다.

메모화란?

메모화와는 같은 결과를 돌려주는 처리에 대해서, 최초회만 처리를 실행 기록해 두어, 값이 필요하게 된 2회째 이후는, 전회의 처리 결과를 계산하지 않고 호출치를 얻을 수 있도록 하는 것 입니다.
매번 계산하지 않아도 좋기 때문에 퍼포먼스 향상을 기대할 수 있습니다.

기본형

종속 배열이 비어 있으면

const sampleMemoFunc = () => {
  const memoResult = useMemo(() => hogeMemoFunc(), [])

  return <div>{memoResult}</div>
}

종속 배열 = [deps]에 빈 배열을 전달하면 아무것도 의존하지 않으므로 한 번만 실행.
즉, 종속성이 변하지 않으면 캐시에서 값을 가져옵니다.

종속 배열에 값이 포함된 경우

props.name 의 값이 바뀌었을 때만 함수를 재실행시키고 싶은 경우는 다음과 같이 써 주세요.

const sampleMemoFunc = (props) => {
  const memoResult = useMemo(() => hogeMemoFunc(props.name), [props.name])

  return <div>{memoResult}</div>
}

종속 배열 = [deps]에 변수를 나열하면 변수의 값이 변경되면 func를 다시 실행합니다.
즉, 종속성이 변경되면 다시 실행합니다.

샘플

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

const UseMemo = () => {
  const [count01, setCount01] = useState(0)
  const [count02, setCount02] = useState(0)

  const result01 = () => setCount01(count01 + 1)
  const result02 = () => setCount02(count02 + 1)

  // const square = () => {
  //   let i = 0
  //   while (i < 2) i++
  //   return count02 * count02
  // }

  const square = useMemo(() => {
    let i = 0
    while (i < 200000000000) i++
    return count02 * count02
  }, [count02])

  return (
    <>
      <div>result01: {count01}</div>
      <div>result02: {count02}</div>
      {/* <div>square: {square()}</div> */}
      <div>square: {square}</div>
      <button onClick={result01}>increment</button>
      <button onClick={result02}>increment</button>
    </>
  )
}

export default UseMemo

square 함수를 useMemo에 대입하지 않는 경우

const square = () => {
  let i = 0
  while (i < 200000000000) i++
  return count02 * count02
}

return <div>square: {square()}</div>

square 함수를 useMemo에 대입하지 않는 경우, square 함수의 처리에 관계 없을 것인 result01 버튼을 눌렀을 경우에서도 분명히 처리가 무겁다.
count01은 square 함수의 처리는 통과하고 있지 않기 때문에 관계 없을 것이지만, 컴퍼넌트가 재생성된 타이밍에서 square 함수가 실행되어 버리는 것이 원인으로, 처리가 무거워지고 있다.

square 함수를 useMemo에 대입한 경우

const square = useMemo(() => {
  let i = 0
  while (i < 200000000000) i++
  return count02 * count02
}, [count02])

return <div>square: {square}</div>

square 함수를 useMemo에 대입했을 경우, result01 버튼을 눌렀을 때에 처리의 무게는 느껴지지 않게 되었다.

square 함수를 useMemo에 대입해 값을 유지하는 것으로, 의존 배열인 count02가 갱신되지 않는 한, square 함수의 처리가 실행되지 않게 되었기 때문에, result01 버튼을 누르었을 경우의 처리가 가벼워졌다.

React.memo/useCallback/useMemo 관련 기사를 다시 작성했으므로 괜찮으시면 부디! !
- 【React】 더 빨라진다! ? 퍼포먼스 최적화에 도전!

마지막으로

다음 번에는 useRef에 대해 쓰고 싶습니다.

참고로 한 사이트
htps : // Rea ctjs. rg/