React - 연산한 값 재사용(useMemo)

주로 성능 최적화에 사용

 

이전에 만든 컴포넌트에서 active가 true인 값들의 수를 세는 것 만들기

React - useEffect Hook

 

- App.js -

맨 위에 함수 추가

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

 

함수 사용

const count = countActiveUsers(users);

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

 

이렇게만 하면, 활성 사용자 수를 컴포넌트가 리렌더링 될 때마다 계속 실행된다.

문자 입력할 때마다 수를 다시 세고 있음

useMemo 사용

- 특정 값이 변할 때만 실행하게 함

- 원하는 값이 바뀌지 않았다면 리렌더링 할 때, 이전에 만들어 놓은 값을 재사용하게 함

 

- App.js -

import React, { useRef, useState, useMemo } from 'react';

...

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

첫 번째 파라미터 - 함수 형태

두 번째 파라미터 - deps

 

-> countActiveUsers()함수는 users가 바뀔 때에만 호출이 되고, 그게 아니라면 이전에 만들어놓은 값을 호출