[React] Study # 16 | useMemo

💡 useMemo?

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

 

countActiveUsers라는 함수를 만들고 active값이 true인 사용자의 수를 세어서 화면에 렌더링 해보자!

 

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 [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(
    // active 속성 추가
    [
      {id: 1, username: 'John', email: 'john@example.com',
      active: true,
    },
      {id: 2, username: 'Car', email: 'car@example.com',
      active: false,
    },
      {id: 3, username: 'lee', email: 'lee@example.com',
      active: false,
    },
    ]
)
    

const nextId = useRef(4);

const onCreate = () => {

    const user = {
      id: nextId.current,
      username,
      email
    };

    setUsers(users.concat(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 = countActiveUsers(users);

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

export default App;

🚫하지만 이때, 발생하는 성능적 문제

• 바로 input에 값을 입력할 때도 countActiveUsers 함수가 호출
• 활성 사용자 수를 세는 건 users에 변화가 있을 때만 세야하는 건데, input 값이 바뀔 때에도 컴포넌트가 리렌더링 되므로 이렇게 불필요한 호출로 인해 자원이 낭비가 되고 있다.

💡이때, useMemo 라는 Hook 함수를 사용하면 성능을 최적화 할 수 있다!

 

App.js

import React,{useRef, useState, useMemo} from 'react'; // useMemo 불러오기
import UserList from './UserList';
import CreateUser from './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(
    // active 속성 추가
    [
      {id: 1, username: 'John', email: 'john@example.com',
      active: true,
    },
      {id: 2, username: 'Car', email: 'car@example.com',
      active: false,
    },
      {id: 3, username: 'lee', email: 'lee@example.com',
      active: false,
    },
    ]
)
    

const nextId = useRef(4);

const onCreate = () => {

    const user = {
      id: nextId.current,
      username,
      email
    };

    setUsers(users.concat(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
    )
  )
}

// useMemo 사용
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;

 

 

---

Reference

https://react.vlpt.us/basic/17-useMemo.html