React- useMemo 를 사용하여 연산한 값 재사용하기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

useMemo 를 사용하여 연산한 값 재사용하기

Memo 는 memoized를 의미하는데, 이는, 이전에 계산 한 값을 재사용한다는 의미를 가지고 있다.

 

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

function countActiveUsers (users) {
  console.log('활성 사용자 수를 세는중...');
  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: 'progaramexplorer',
        email: 'progaramexplorer@naver.com',
        active: true
    },
    {
        id: 2,
        username: 'tester',
        email: 'tester@gmail.com',
        active: false
    },
    {
       id: 3,
       username: 'liz',
       email: 'liz@daum.net',
       active: false 
    }
]);

const nextId = useRef(4);

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

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] );

   return (
     <>
        <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
        <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
        <div>활성 사용자 수: {count}</div>
     </>
    );
}

export default App;

useMemo 의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고 두번째 파라미터에는 deps 배열을 넣어주면 되는데 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다.

 

실행 결과

2개의 아이디를 초록색으로 활성화 시키니 활성 사용자 2 가 화면에 나타난다.

 

그리고 새로운 계정을 추가하는 일을 해도 활성 사용자 값을 재사용 하여 2로 유지 하고 있는 것을 볼 수 있다.