React - useMemo, useCallback

useMemo

메모이제이션(memoization)된 값을 반환
함수형 컴포넌트 - 렌더링 -> Component함수 호출 -> 모든 내부 변수 초기화
= 호출하는 함수가 무거운 함수라면, 매우 비효율적 --> useMemo가 해결
useMemo - 렌더링 -> Component함수 호출 -> Memoize된 함수 재사용
값을 재활용 하기 위해 따로 메모리르 소비하여 저장 -> 꼭 필요할 때에만 사용

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

computeExpensiveValue(a, b) // 콜백함수

[a, b] // 배열

배열의 요소 값이 업데이트 될 때만 콜백함수를 호출하여 memoization된 값을 업데이트 -> memoization을 해줌.

메모이제이션 ? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장 -> 동일한 계산 반복 수행 제거 -> 컴포넌트의 성능 최적화.

active상태의 사용자의 수를 count

App.jsx

import React, {useRef, useState, useMemo} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

function countActiveUsers(users){
  return users.filter(user => user.active).length;
}
function App() {
  const [inputs, setInputs] = useState({
    username : '',
    email : ''
  })

  const {username, email} = inputs;

  const onChange = (e) => {
    const {name, value} = e.target;
    setInputs({...inputs, [name]:value})
  }

  
  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com',
      active : true
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com',
      active : false

    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com',
      active : false
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {
      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

      setInputs({
        username  :'',
        email : ''
      })
    }

    const onRemove = (id) => {
      setUsers(users.filter(user => user.id !==id));

    }

    const onToggle = (id) => {
      console.log(id);
      setUsers(users.map(user =>
        user.id == id? 
        {
          ...user, 
          active:!user.active
        }
          :
          user
          )
      )
    }

    const count = useMemo(()=>countActiveUsers(users),[users]);
    
  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} onRemove={onRemove} onToggle = {onToggle}/>
      <div>Active 상태의 사용자 수 : {count}</div>
    </>
  );
}

export default App;

useCallback

메모이제이션된 콜백을 반환.
useCallback(fn, deps)은 useMemo(() => fn, deps)와 같음
useMemo보다 함수를 위해 사용 할 때 더욱 편안.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

App.jsx

import React, {useRef, useState, useMemo, useCallback} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

function countActiveUsers(users){
  return users.filter(user => user.active).length;
}
function App() {
  const [inputs, setInputs] = useState({
    username : '',
    email : ''
  })

  const {username, email} = inputs;

  const onChange = useCallback((e)=>{
    const {name, value} = e.target;
    setInputs({...inputs, [name]:value})
  }, [inputs])
  
  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com',
      active : true
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com',
      active : false

    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com',
      active : false
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {
      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

      setInputs({
        username  :'',
        email : ''
      })
    }

    const onRemove = (id) => {
      setUsers(users.filter(user => user.id !==id));

    }

    const onToggle = (id) => {
      console.log(id);
      setUsers(users.map(user =>
        user.id == id? 
        {
          ...user, 
          active:!user.active
        }
          :
          user
          )
      )
    }

    const count = useMemo(()=>countActiveUsers(users),[users]);
    
  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} onRemove={onRemove} onToggle = {onToggle}/>
      <div>Active 상태의 사용자 수 : {count}</div>
    </>
  );
}

export default App;

출처 :
HookAPIReference
메모이제이션
useMemo 사용법 및 예제