리액트 - useMemo, useCallback, React.memo 알아보기

useMemo

useMemo(function(), deps):특정 값이 바뀔때만 특정 함수를 실행해서 연산을 실행

deps : dependecies로 해당 내용이 변경되면 값을 연산해주고 그렇지 않으면 캐싱된 값을 사용한다.

 

하단 코드는 액티브 유저를 카운트 하는 경우에만 해당 컴포넌트를 리렌더링 해야하는데

유저를 추가한다거나 다른 컴포넌트에서 동작을 하는 경우에도 해당 컴포넌트가 리렌더링이된다.

 

이 경우에는 해당 함수의 값이 바뀔 때만 함수를 실행시키고 싶으므로 useMemo를 사용하면 된다.

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

function countActiveUsers(users){
  console.log('counting active users...')

  return users.filter(user => user.active).length
}

...

const count = useMemo(()=>countActiveUsers(users),[users]);

...

return{
	<div> active users: {count}</div>
}

useCallback

useCallback(function(), deps) : 특정값이 바뀔 때 함수를 재사용

 

컴포넌트가 재렌더링이 일어나도 초기화 되지 않고 캐싱된 함수 자체를 계속 가지고 있는다

컴포넌트가 리렌더링되어도 해당 함수를 초기화하지 않고 메모이제이션 즉, 저장된 함수를 재사용한다

const onToggle = useCallback(
    (id) =>{
    setUsers(users=>users.map(
      user => user.id === id
      ? {...user, active: !user.active}: user
    ))  
  }, [])

함수 안에서 참조하는 상태값이나 props가 있다면 deps에 꼭 넣어줘야한다. 그렇지 않으면 최신 값을 참고하는 것이 아닌 초기값을 참고하게된다.

💡useMemo 함수의 연산을 실행하는 반면 useCallback은 이름 그대로 함수를 리턴하는 것

React.memo

React.memo : props 가 바뀌었을 때만 리렌더링 된다, 렌더링된 컴포넌트를 재사용

 

모든 컴포넌트에 사용하는 것이 아님, 재사용이 필요한 경우에만 사용

deps에는 users로 watch를 하고 있기 때문에 배열이 추가, 삭제와 같이 변경 될 때 리렌더링된다.

새로운 유저의 입력이 들어오는 경우에만 리렌더링을 하면 되기 때문에 React.memo를 쓰는 것이 좋다.

function CreateUser({username, email, onChange, onCreate}){
  console.log('create user')
  return(
    <div>
      <input
       name="username" placeholder='user name' onChange={onChange} value={username}/>
      <input  
       name="email" placeholder='email' onChange={onChange} value={email}/>
      <button onClick={onCreate}> register</button>
    </div>
  )

}

리렌더링을 최적화하려면?

각 함수들에서 현재 useState 로 관리하는 users 를 참조하지 않게 한다.

⇒ 함수형 업데이트 : useState에 등록하는 콜백함수에서 최신 users를 참조하기때문에 deps에 users를 넣기 않아도 최신 users를 참고 하게된다.

---

 

해당 부분에 대해서 블로그 검색을 하다보니 캐싱이라는 말 보다는 메모이제이션이라는 단어를 자주 보게된다.

vue에서는 보지 못햇던 단어…자료구조 기술이기에 알아두면 좋을 것 같다

메모이제이션(memoization)

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

https://ko.wikipedia.org/wiki/메모이제이션