useMemo

useMemo는 성능 최적화를 위해 연산된 값을 재사용할 때 사용한다.

사용자이름, 이메일을 넣으면 회원가입이 가능한 App 컴포넌트가 있다.

그리고 현재 회원가입이 완료된 회원 수를 세는 countUsers 함수가 있다.

import React, { useState } from 'react';

function countUsers (users) {
  console.log("회원 수를 세는 중...");
  return users.length;
}

function App() {
  const [users, setUsers] = useState([]);

  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });

  const { username, email } = inputs;
  const onCreate = () => {
    setUsers([
      ...users,
      {
        username: username,
        email: email
      }
    ]);
  }

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

  const count = countUsers(users);

  return (
    <div>
      <input name='username' onChange={onChange} value={username} placeholder='이름'></input>
      <input name='email' onChange={onChange} value={email} placeholder='이메일'></input>
      <button onClick={onCreate}>등록</button>
      <div>
        {
          users.map(user => <div>{user.username} ({user.email})</div>)
        }
      </div>
      <div>전체 회원 수: {count}</div>
    </div>
  )
}
export default App;

 

초기상태

 

회원 2명이 가입한 상태

 

위 스크린샷을 보면 아무 문제가 없어보인다.

하지만 input에 '이공원' 등 입력하기 위해서 키보드를 누를 때마다 countUsers 함수가 실행되는 문제가 발생하고 있다.

countUsers 함수가 매번 실행되는 것은 console.log("회원 수를 세는 중...")을 통해서 알 수 있다.

 

그 이유는 35번째줄 const count = countUsers(user); 때문이다.

html <input>에 입력이 들어올 때마다 App 컴포넌트의 상태인 inputs가 바뀌므로 App이 매번 리렌더링되고,

그 때마다 countUsers가 재호출되는 것이다.

 

이러한 불필요한 함수 호출을 줄여 성능을 최적화하기 위해서는 useMemo라는 Hook 함수를 사용할 수 있다.

useMemo는 값을 저장해서 이 값이 이전과 달라지지 않았다면 함수를 호출하지 않고 이전 값을 재사용해서 성능을 최적화한다.

 

사용법은 useMemo(값을 새로 연산하기 위해 호출할 함수, [함수를 호출할지 말지 결정하는 변수이름]) 이다.

위 App 컴포넌트에서 함수를 호출할지 말지 정하는 변수이름은 users이다. 그리고 값을 새로 연산하기 위해 호출할 함수는 countUsers이다. 

여기서 참고로 '컴포넌트에서 함수를 호출할지 말지 정하는 변수'는 deps라고 불린다. dependencies...

const count = useMemo(() => countUsers(users), [users])를 35번째줄에 대신 넣으면

input에 입력을 하는 등 실제 회원수가 변하지 않았는데도 count를 계산하기 위해 countUsers를 매번 호출하는 일이 없어진다.