[react-native] useMemo

 useMemo는 React의 Hook 중 하나로, 성능 최적화를 위해 메모이제이션된 값을 반환한다.

 

이 Hook은 계산 비용이 많이 드는 함수의 결과값을 재사용함으로써, 불필요한 재계산을 방지하고 애플리케이션의 효율성을 높이는 데 사용된다.

 

useMemo는 두 개의 인자를 받는데, 첫 번째 인자는 메모이제이션할 값을 생성하는 함수이며, 두 번째 인자는 이 함수가 의존하는 값들의 배열이다.

 

의존성 배열의 값이 변경될 때만 함수가 실행되어 값을 재계산하고, 그렇지 않으면 이전에 메모이제이션된 값을 재사용한다.

 

예제와 함께 알아보도록 하자.

---

아래는 useMemo를 사용하는 간단한 예제이다. 이 예제에서는 사용자의 목록을 필터링하는 비용이 많이 드는 연산을 메모이제이션한다.

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

function UserList({ users }) {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredUsers = useMemo(() => {
    return users.filter(user =>
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search by name"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

 

이 예제에서 useMemo는 filteredUsers를 계산하는 데 사용된다.

 

users 배열과 searchTerm 문자열이 변경될 때만 filter 함수를 통해 사용자 목록을 필터링한다.

 

그 결과, 사용자가 입력란에 텍스트를 입력할 때마다 전체 사용자 목록을 재필터링하지 않고, 검색어나 사용자 목록이 실제로 변경됐을 때만 필터링 연산이 수행된다.

 

이로써, 불필요한 연산을 줄이고 애플리케이션의 성능을 개선할 수 있다.

 

* 주의사항

• useMemo는 성능 최적화를 목적으로 사용되어야 하며, 부수 효과(side effects)를 실행하기 위해 사용되어서는 안 된다. 부수 효과는 useEffect Hook을 사용하여 처리해야 한다.
• 메모이제이션은 자원을 절약하는 방법이지만, 메모리를 추가로 사용한다는 점을 기억해야 한다. 따라서, 모든 값에 useMemo를 남용하는 것은 피해야 한다.

 useMemo를 적절히 사용하면, React 애플리케이션의 성능을 크게 향상시킬 수 있다. 하지만, 사용 사례를 신중히 고려하고 필요한 곳에만 적용하여, 최적의 성능 이점을 얻어야 한다.