[JavaScript] React - useMemo를 사용한 연산값 재사용하기

React

useMemo

useMemo는 특정값이 바뀌었을때만 특정 함수를 실행해서 연산하고 바뀌지 않았다면 리렌더링할때 이전의 만들었던 값을 재사용할 수 있게 해준다.

아래 예제를 통해서 useMemo를 사용해봅시다. 이전 블로그에서 사용했던 App.js코드에 추가해서 useMemo를 확인해보도록 하겠습니다.

import React, { useRef, useMemo } from 'react';		  // <App.js>
import UserList from './UserList';

function countActiveUsers(users) {
  console.log("활성 사용자 수를 세는중...")
  // useMemo를 적용하기 전에는 "활성 사용자 수를 세는중..." 값이 바뀌어도,
  // 인풋값에 값이 씌여져도 계속 렌더링되면서 로그에 찍히게됩니다.
  // 이것을 방지하기 위해서 useMemo를 통해 최적화를 진행하도록 하겠습니다.
  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 = [   
     {
      id: 1,
      username: 'Jongil',
      email: 'sji7532@gmail.com',
      active: true,
    },
    {
      id: 2,
      username: 'Test1',
      email: '1@gmail.com',
      active: false,
    },
    {
      id: 3,
      username: 'Sohn',
      email: '2@gmail.com',
      active: false,
    }
  ]

  const nextID = useRef(4)

  const onCreate = () => {
     nextId.current += 1
    const user = {
      id: nextID.current,
      username,
      email,
    }
    setUsers(users.concat(user))
    setInputs({
      username: '',
      email: '',
    })
  }

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

  const onToggle = id => {
    setUsers(users.map(
      user => user.id === id 
      ? {...user, active: !user.active} 
      :  user
    ));
  }
  
  const count = useMemo(()=>countActiveUsers(users), [users])
    // useMemo는 첫번째 파라미터는 함수, 두번째 파라미터는 deps배열이 들어오게 되는데
    // 즉, deps에 넣는 값이 바뀌어야만 값을 연산해주겠다 라는 것이 됩니다.
    // => useMemo를 적용하게되면 deps배열에 등록한 값이 바뀌게되었을 때만 연산하고 
    // 렌더링되면서 로그에 활성 사용자 수를 세는중이라는 로그가 찍히게되며,
    // 바뀌지 않았을때는 이전의 값을 그대로 사용하게 됩니다.

  return (
    <div>
      <CreateUser 
      username={username} 
      email={email} 
      onChange={onChange} 
      onCreate={onCreate} 
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
    </div>
  );
}

export default App;

• fastcampus 벨로퍼트님 리액트 강의자료를 공부하며 정리하며 작성하였습니다.