[React] useMemo - 자원을 효율적으로 memorized

성능 최적화를 위해 연산된 값을 재사용하는 방법을 알아보자

이때 useMemo 를 사용하게 된다.

 

1. active 값이 true 인 사용자 수를 세어보자

 

이전 코드에서 

2022.01.25 - [수업/React] - [React] 배열 수정 하기

[React] 배열 수정 하기

추가된 내용을 보자

 

App.js

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


function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

function App() {

		...
        
        const count = countActiveUsers(users);
          return (
            <>
              ...
              <div>활성사용자 수 : {count}</div>
            </>
          );
  }

이 부분을 추가한다.

 

countActiveusers 함수를 호출하여 그 수를 알아내면 된다.

그런데 이때 사용자를 활성할 때 뿐만 아니라 input값을 바꿀 때도 이 함수가 호출된다

컴포넌트가 리렌더링 되기 때문이다.

 

이렇게 불필요한 호출을 방지하기 위해

useMemo 를 사용하여 성능을 최적화 한다.

=> 계산한 값을 재사용한다는 의미를 가진다

 

 

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

이 부분만 바꿔주면 된다.

 

useMemo 의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고

 

두번째 파라미터에는 deps 배열을 넣어주면 되는데,

이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고,

만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 됩니다.

 

그러니까 users 전체 배열에 값이 추가/삭제/수정 되지 않는 이상 값이 저 함수가 호출되지 않는다는 것이다.