useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• Reference참조
  • useMemo(calculateValue, dependencies)
• Usage사용법
  • Skipping expensive recalculations비용이 많이 드는 재계산 생략하기
  • Skipping re-rendering of components컴포넌트의 리렌더링 건너뛰기
  • Memoizing a dependency of another Hook다른 훅의 의존성 메모화
  • Memoizing a function함수 메모화
• Troubleshooting문제 해결
  • My calculation runs twice on every re-render리렌더링할 때마다 계산이 두 번 실행됩니다
  • My useMemo call is supposed to return an object, but returns undefineduseMemo 호출이 객체를 반환하길 기대했으나 실제로는 undefined 객체를 반환합니다
  • Every time my component renders, the calculation in useMemo re-runs컴포넌트가 렌더링될 때마다 useMemo의 계산이 다시 실행됩니다
  • I need to call useMemo for each list item in a loop, but it’s not allowed 루프에서 각 목록 항목에 대해 useMemo를 호출해야 하는데 허용되지 않는다고 합니다

Reference참조

useMemo(calculateValue, dependencies)

Call useMemo at the top level of your component to cache a calculation between re-renders: 컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시합니다.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

See more examples below. 아래에서 더 많은 예시를 확인하세요.

Parameters매개변수

• calculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next renders, React will return the same value again if the dependencies have not changed since the last render. Otherwise, it will call calculateValue, return its result, and store it so it can be reused later. calculateValue: 캐시하려는 값을 계산하는 함수입니다. 이 함수는 순수함수여야 하며, 인자를 받지 않고, 반드시 어떤 타입이든 값을 반환해야 합니다. React는 초기 렌더링 중에 함수를 호출합니다. 이후의 렌더링에서는 의존성이 이전 렌더링 이후 변경되지 않았다면 동일한 값을 반환합니다. 그렇지 않으면 calculateValue를 호출하고 그 결과를 반환하며, 나중에 재사용할 수 있도록 저장합니다.

• dependencies: The list of all reactive values referenced inside of the calculateValue code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is configured for React, it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like [dep1, dep2, dep3]. React will compare each dependency with its previous value using the Object.is comparison. dependencies: calculateValue 코드 내에서 참조되는 모든 반응형 값들의 목록입니다. 반응형 값에는 props, state 및 컴포넌트 본문 내에서 직접 선언된 모든 변수와 함수가 포함됩니다. React용으로 구성된 린터를 사용하면, 모든 반응형 값이 의존성으로 올바르게 지정되어 있는지 확인합니다. 의존성 목록에는 항목 수가 일정하고 [dep1, dep2, dep3]와 같이 인라인으로 작성되어야 합니다. React는 Object.is 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다.

Returns반환값

On the initial render, useMemo returns the result of calling calculateValue with no arguments. 초기 렌더링에서 useMemo는 인자 없이 calculateValue를 호출한 결과를 반환합니다.

During next renders, it will either return an already stored value from the last render (if the dependencies haven’t changed), or call calculateValue again, and return the result that calculateValue has returned. 이후 렌더링에서는, 의존성이 변경되지 않은 경우에는 마지막 렌더링에서 저장된 값을 반환하고, 변경된 경우에는 calculateValue를 다시 호출하여 그 결과를 반환합니다.

Caveats주의사항

• useMemo is a Hook, so you can only call it at the top level of your component or your own Hooks. You can’t call it inside loops or conditions. If you need that, extract a new component and move the state into it. useMemo는 훅이므로 컴포넌트의 최상위 레벨 또는 커스텀 훅에서만 호출할 수 있습니다. 반복문이나 조건문 안에서 호출할 수 없습니다. 만약 필요하다면, 새로운 컴포넌트를 생성하고 해당 컴포넌트로 state를 이동시키세요.

• In Strict Mode, React will call your calculation function twice in order to help you find accidental impurities. This is development-only behavior and does not affect production. If your calculation function is pure (as it should be), this should not affect your logic. The result from one of the calls will be ignored. Strict 모드에서는 React가 의도치 않은 불순물을 찾기 위해 계산 함수를 두 번 호출합니다. 이는 개발 전용 동작이며 상용 환경에서는 영향을 미치지 않습니다. 계산 함수가 순수하다면(그래야 합니다) 이것은 컴포넌트의 로직에 영향을 미치지 않을 것입니다. 두 번의 호출 중 하나의 결과는 무시됩니다.

• React will not throw away the cached value unless there is a specific reason to do that. For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache—for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should be fine if you rely on useMemo solely as a performance optimization. Otherwise, a state variable or a ref may be more appropriate. React는 특별한 이유가 있지 않는 한 캐시된 값을 유지하려고 합니다. 예를 들어, React는 개발 중에 컴포넌트 파일을 수정하면 캐시된 값을 폐기합니다. 개발 환경 및 상용 환경 모두에서, 초기 마운트 중에 컴포넌트가 일시 중단(suspend)되면 React는 캐시를 폐기합니다. 미래에 React는 캐시를 폐기하는 것을 활용하는 더 많은 기능을 추가할 수 있습니다. 예를 들어, 미래에 React가 가상화된 목록에 대한 기본 지원을 추가한다면, 가상화된 테이블 뷰포트에서 벗어난 항목에 대한 캐시를 폐기하는 것이 타당할 것입니다. useMemo를 성능 최적화를 위해서만 사용하는 경우에는 괜찮을 것입니다. 그렇지 않다면 state variable 또는 ref가 더 적절할 수 있습니다.

Usage사용법

Skipping expensive recalculations비용이 많이 드는 재계산 생략하기

To cache a calculation between re-renders, wrap it in a useMemo call at the top level of your component: 리렌더링간의 계산값을 캐시하려면 컴포넌트의 최상단에서 useMemo 호출로 해당 값을 감싸세요:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

You need to pass two things to useMemo: useMemo에는 두 가지를 전달해야 합니다:

1. A calculation function that takes no arguments, like () =>, and returns what you wanted to calculate. 인자(argument)를 받지 않고(() =>), 원하는 값을 계산하여 반환하는 계산 함수.

2. A list of dependencies including every value within your component that’s used inside your calculation. 컴포넌트 내에서 계산에 사용되는 모든 값을 포함하는 의존성 목록.

On the initial render, the value you’ll get from useMemo will be the result of calling your calculation. 초기 렌더링 시에는, useMemo를 통해 얻는 값은 계산 함수를 호출한 결과값입니다.

On every subsequent render, React will compare the dependencies with the dependencies you passed during the last render. If none of the dependencies have changed (compared with Object.is), useMemo will return the value you already calculated before. Otherwise, React will re-run your calculation and return the new value. 그 이후 모든 렌더링에서, React는 이전 렌더링에서 전달한 의존성과 현재의 의존성을 비교합니다. 의존성이 변경되지 않았다면(Object.is), useMemo는 이전에 계산했던 값을 반환합니다. 그렇지 않다면, React는 계산을 다시 실행하고 새로운 값을 반환합니다.

In other words, useMemo caches a calculation result between re-renders until its dependencies change. 간단히 말해서, useMemo는 의존성이 변경되기 전까지 계산 결과를 캐시합니다

Let’s walk through an example to see when this is useful. 언제 이것이 유용한지 예제를 통해 살펴 봅시다.

By default, React will re-run the entire body of your component every time that it re-renders. For example, if this TodoList updates its state or receives new props from its parent, the filterTodos function will re-run: 기본적으로 React는 컴포넌트가 다시 렌더링될 때마다 컴포넌트 전체 본문을 다시 실행합니다. 예를 들어, 이 TodoList가 state를 업데이트하거나 부모로부터 새로운 props를 받는 경우, filterTodos 함수가 다시 실행됩니다:

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

Usually, this isn’t a problem because most calculations are very fast. However, if you’re filtering or transforming a large array, or doing some expensive computation, you might want to skip doing it again if data hasn’t changed. If both todos and tab are the same as they were during the last render, wrapping the calculation in useMemo like earlier lets you reuse visibleTodos you’ve already calculated before. 대부분의 계산은 매우 빠르기 때문에 이것은 문제가 되지 않습니다. 그러나 큰 배열을 필터링하거나, 변환하거나, 고비용의 계산을 수행할 때, 데이터가 변경되지 않았다면 다시 계산하는 것을 건너뛰고 싶을 수 있습니다. todos와 tab이 이전 렌더링 때와 동일하다면, 이전처럼 계산을 useMemo로 감싸서 이전에 이미 계산해놓은 visibleTodos를 재사용할 수 있습니다.

This type of caching is called memoization. 이러한 종류의 캐싱을 *메모화*라고 합니다.

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // Skipped if todos and tab haven't changed
                                  // todos 및 tab이 모두 변경되지 않으면 건너뜁니다
}, [todos, tab]);
console.timeEnd('filter array');

Skipping re-rendering of components컴포넌트의 리렌더링 건너뛰기

In some cases, useMemo can also help you optimize performance of re-rendering child components. To illustrate this, let’s say this TodoList component passes the visibleTodos as a prop to the child List component: 어떤 경우에는 useMemo를 사용하여 자식 컴포넌트의 리렌더링 성능을 최적화할 수도 있습니다. 이를 설명하기 위해, TodoList 컴포넌트가 visibleTodos를 자식 List 컴포넌트에 prop으로 전달한다고 가정해 보겠습니다.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

You’ve noticed that toggling the theme prop freezes the app for a moment, but if you remove <List /> from your JSX, it feels fast. This tells you that it’s worth trying to optimize the List component. theme prop을 전환하면 앱이 잠시 동안 멈추지만, JSX에서 <List />를 제거하면 빠르게 동작하는 것을 확인했습니다. List 컴포넌트의 최적화를 시도해볼 가치가 있겠습니다.

By default, when a component re-renders, React re-renders all of its children recursively. This is why, when TodoList re-renders with a different theme, the List component also re-renders. This is fine for components that don’t require much calculation to re-render. But if you’ve verified that a re-render is slow, you can tell List to skip re-rendering when its props are the same as on last render by wrapping it in memo: 기본적으로 컴포넌트가 리렌더링되면 React는 모든 자식 컴포넌트를 재귀적으로 리렌더링합니다. 이 때문에 다른 theme로 TodoList가 리렌더링되면 List 컴포넌트도 리렌더링됩니다. 이는 리렌더링에 많은 계산이 필요하지 않은 컴포넌트의 경우에는 괜찮습니다. 그러나 리렌더링이 느리다는 것을 확인했다면, 이전 렌더링과 동일한 prop이 있는 경우 List가 리렌더링을 건너뛰도록 memo로 감싸줄 수 있습니다.

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

With this change, List will skip re-rendering if all of its props are the same as on the last render. This is where caching the calculation becomes important! Imagine that you calculated visibleTodos without useMemo: 이 변경으로 인해 List는 모든 prop이 이전 렌더링과 같은 경우에는 리렌더링을 건너뛸 것입니다. 이는 캐싱 계산이 중요해지는 부분입니다! useMemo를 사용하지 않고 visibleTodos를 계산했다고 상상해 보세요:

export default function TodoList({ todos, tab, theme }) {
  // Every time the theme changes, this will be a different array...
  // theme가 변경될 때마다 매번 다른 배열이 됩니다...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... so List's props will never be the same, and it will re-render every time */}
      {/* ... List의 prop은 절대로 같을 수 없으므로, 매번 리렌더링할 것입니다 */}
      <List items={visibleTodos} />
    </div>
  );
}

In the above example, the filterTodos function always creates a different array, similar to how the {} object literal always creates a new object. Normally, this wouldn’t be a problem, but it means that List props will never be the same, and your memo optimization won’t work. This is where useMemo comes in handy: 위 예제에서는 filterTodos 함수가 항상 다른 배열을 생성합니다. 이는 {} 객체 리터럴이 항상 새로운 객체를 생성하는 것과 비슷합니다. 이는 일반적으로는 문제가 되지 않지만, List의 prop은 결코 같은 값을 가질 수 없고, 따라서 memo 최적화도 작동하지 않음을 의미합니다. 바로 이럴 때 useMemo가 유용합니다:

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  // 리렌더링 사이에 계산 결과를 캐싱하도록 합니다...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
                 // ...따라서 여기의 의존성이 변경되지 않는다면 ...
  );
  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      {/* ...List는 같은 props를 전달받게 되어 리렌더링을 건너뛸 수 있게 됩니다 */}
      <List items={visibleTodos} />
    </div>
  );
}

By wrapping the visibleTodos calculation in useMemo, you ensure that it has the same value between the re-renders (until dependencies change). You don’t have to wrap a calculation in useMemo unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in memo, and this lets it skip re-rendering. There are a few other reasons to add useMemo which are described further on this page. visibleTodos 계산을 useMemo로 감싸면, 리렌더링 사이에 동일한 값이 보장됩니다(의존성이 변경될 때까지). 특별한 이유가 없다면 계산을 useMemo로 감싸지 않아도 됩니다. 이 예제에서는 memo로 감싼 컴포넌트에 전달하면 리렌더링을 건너뛸 수 있기 때문입니다. useMemo를 추가해야 하는 몇 가지 다른 이유에 대해서는 페이지 하단에서 소개하겠습니다.

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

Memoizing a dependency of another Hook다른 훅의 의존성 메모화

Suppose you have a calculation that depends on an object created directly in the component body: 컴포넌트 본문에서 직접 생성한 객체에 의존하는 계산이 있다고 가정해 보겠습니다:

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body
                                 // 🚩 주의: 컴포넌트 내부에서 생성한 객체 의존성
  // ...

Depending on an object like this defeats the point of memoization. When a component re-renders, all of the code directly inside the component body runs again. The lines of code creating the searchOptions object will also run on every re-render. Since searchOptions is a dependency of your useMemo call, and it’s different every time, React knows the dependencies are different, and recalculate searchItems every time. 이렇게 객체에 의존하는 것은 메모화의 취지를 무색하게 합니다. 컴포넌트가 다시 렌더링되면 컴포넌트 본문 내부의 모든 코드가 다시 실행됩니다. searchOptions 객체를 생성하는 코드 라인도 다시 렌더링할 때마다 실행됩니다. searchOptions 는 useMemo 호출의 의존성이고 매번 다르기 때문에, React는 의존성이 지난번과 다르다는 것을 알고, 매번 searchItems 를 다시 계산합니다.

To fix this, you could memoize the searchOptions object itself before passing it as a dependency: 이 문제를 해결하려면 searchOptions 객체를 의존성으로 전달하기 전에 객체 자체를 메모화할 수 있습니다:

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Only changes when text changes
              // ✅ text 변경시에만 변경됨

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
                                 // ✅ allItems 또는 searchOptions 변경시에만 변경됨
  // ...

In the example above, if the text did not change, the searchOptions object also won’t change. However, an even better fix is to move the searchOptions object declaration inside of the useMemo calculation function: 위의 예에서 text 가 변경되지 않았다면 searchOptions 객체도 변경되지 않습니다. 이보다 더 나은 수정 방법은 searchOptions 객체 선언을 useMemo 계산 함수 내부로 이동하는 것입니다:

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ Only changes when allItems or text changes
                        // ✅ allItems 또는 text 변경시에만 변경됨
  // ...

Now your calculation depends on text directly (which is a string and can’t “accidentally” become different). 이제 계산은 (객체 처럼 “실수로” 다른 값이 될 수 없는 문자열) text에 직접 의존합니다.

Memoizing a function함수 메모화

Suppose the Form component is wrapped in memo. You want to pass a function to it as a prop: 컴포넌트가 memo로 감싸져 있다고 가정해 봅시다. 여기에 함수를 prop으로 전달하려고 합니다:

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

Just as {} creates a different object, function declarations like function() {} and expressions like () => {} produce a different function on every re-render. By itself, creating a new function is not a problem. This is not something to avoid! However, if the Form component is memoized, presumably you want to skip re-rendering it when no props have changed. A prop that is always different would defeat the point of memoization. {}가 다른 객체를 생성하는 것과 같이, function() {} 함수 선언 및 () => {} 표현식 등은 모두 리렌더링할 때마다 다른 함수를 생성합니다. 새 함수를 만드는 것 자체는 문제가 되지 않습니다. 피해야 할 일이 아닙니다! 하지만 Form 컴포넌트가 메모화되어 있다면 props가 변경되지 않았을 때 리렌더링하는 것을 건너뛰고 싶을 것입니다. prop이 항상 달라지면 메모화의 취지가 무색해집니다.

To memoize a function with useMemo, your calculation function would have to return another function: useMemo로 함수를 메모화하려면 계산 함수가 다른 함수를 반환해야 합니다:

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

This looks clunky! Memoizing functions is common enough that React has a built-in Hook specifically for that. Wrap your functions into useCallback instead of useMemo to avoid having to write an extra nested function: 이는 투박해 보입니다! 함수를 메모화하는 것은 충분히 흔한 일이므로 React는 이를 위한 특별한 훅을 제공합니다. 중첩 함수를 추가로 작성할 필요가 없도록 함수를 useMemo 대신 useCallback으로 감싸세요:

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

The two examples above are completely equivalent. The only benefit to useCallback is that it lets you avoid writing an extra nested function inside. It doesn’t do anything else. Read more about useCallback. 위의 두 예제는 완전히 동일합니다. useCallback을 사용하면 내부에 중첩된 함수를 추가로 작성하지 않아도 된다는 장점이 있습니다. 그 외에는 다른 기능을 수행하지 않습니다. useCallback에 대해 자세히 알아보세요.

Troubleshooting문제 해결

My calculation runs twice on every re-render리렌더링할 때마다 계산이 두 번 실행됩니다

In Strict Mode, React will call some of your functions twice instead of once: Strict Mode에서는 React가 일부 함수를 한 번이 아닌 두 번 호출합니다:

function TodoList({ todos, tab }) {
  // This component function will run twice for every render.
  // 이 컴포넌트 함수는 매 렌더링시마다 두 번 호출됩니다.

  const visibleTodos = useMemo(() => {
    // This calculation will run twice if any of the dependencies change.
    // 이 계산은 의존성 변경시마다 두 번씩 실행됩니다.
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

This is expected and shouldn’t break your code. 이는 정상적인 현상이며, 이로 인해 코드가 손상되지 않아야 합니다.

This development-only behavior helps you keep components pure. React uses the result of one of the calls, and ignores the result of the other call. As long as your component and calculation functions are pure, this shouldn’t affect your logic. However, if they are accidentally impure, this helps you notice and fix the mistake. 이 개발 환경 전용 동작은 컴포넌트를 순수하게 유지하는 데 도움이 됩니다. React는 호출 중 하나의 결과를 사용하고 다른 호출의 결과는 무시합니다. 컴포넌트와 계산 함수가 순수하다면 이 동작이 로직에 영향을 미치지 않습니다. 반면 의도치 않게 순수하지 않은 경우에는 실수를 알아차리는 데 도움이 됩니다.

For example, this impure calculation function mutates an array you received as a prop: 예를 들어, 순수하지 않게 계산된 함수는 prop으로 받은 배열을 변이합니다:

  const visibleTodos = useMemo(() => {
    // 🚩 Mistake: mutating a prop
    // 🚩 실수: prop 변이
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

React calls your function twice, so you’d notice the todo is added twice. Your calculation shouldn’t change any existing objects, but it’s okay to change any new objects you created during the calculation. For example, if the filterTodos function always returns a different array, you can mutate that array instead: React는 함수를 두 번 호출하므로 할 일이 두 번 추가되었음을 알 수 있습니다. 계산은 기존 객체를 변경해서는 안 되지만, 계산 중에 생성한 새 객체를 변경하는 것은 괜찮습니다. 예를 들어, filterTodos 함수가 항상 다른 배열을 반환하는 경우, 해당 배열을 변이할 수 있습니다:

  const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ Correct: mutating an object you created during the calculation
    // ✅ 올바름: 계산 중에 생성한 객체의 변이
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

Read keeping components pure to learn more about purity. 순수성에 대해 자세히 알아보려면 컴포넌트 순수성 유지를 읽어보세요.

Also, check out the guides on updating objects and updating arrays without mutation. 또한 객체 업데이트 및 배열 업데이트 가이드를 참조하여 변이 없이 업데이트하세요.

My useMemo call is supposed to return an object, but returns undefineduseMemo 호출이 객체를 반환하길 기대했으나 실제로는 undefined 객체를 반환합니다

This code doesn’t work: 이 코드는 작동하지 않습니다:

  // 🔴 You can't return an object from an arrow function with () => {
  // 🔴 화살표 함수에서 () => { 만으로는 객체를 리턴할 수 없습니다.
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

In JavaScript, () => { starts the arrow function body, so the { brace is not a part of your object. This is why it doesn’t return an object, and leads to mistakes. You could fix it by adding parentheses like ({ and }): JavaScript에서 () => {는 화살표 함수 본문을 시작하므로 { 중괄호는 객체의 일부가 아닙니다. 이 때문에 객체를 반환하지 않고 실수가 발생합니다. ({와 })로 괄호를 추가하면 이 문제를 해결할 수 있습니다:

  // This works, but is easy for someone to break again
  // 이 코드는 작동하지만, 누군가에 의해 다시 꺠지기 쉽습니다
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

However, this is still confusing and too easy for someone to break by removing the parentheses. 하지만 이 방식은 여전히 혼란스럽고, 다른 누군가가 괄호를 제거하여 깨뜨리기 쉽습니다.

To avoid this mistake, write a return statement explicitly: 이러한 실수를 방지하려면 명시적으로 return 문을 작성하세요:

  // ✅ This works and is explicit
  // ✅ 이 코드는 작동하며 명시적입니다
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

Every time my component renders, the calculation in useMemo re-runs컴포넌트가 렌더링될 때마다 useMemo의 계산이 다시 실행됩니다

Make sure you’ve specified the dependency array as a second argument! 두 번째 인자로 의존성 배열을 지정했는지 확인하세요!

If you forget the dependency array, useMemo will re-run the calculation every time: 의존성 배열을 잊어버렸을 경우, useMemo는 매번 계산을 다시 실행합니다:

function TodoList({ todos, tab }) {
  // 🔴 Recalculates every time: no dependency array
  // 🔴 매 번 재계산: 의존성 배열이 없음
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

This is the corrected version passing the dependency array as a second argument: 다음은 의존성 배열을 두 번째 인수로 전달하는 수정된 버전입니다:

function TodoList({ todos, tab }) {
  // ✅ Does not recalculate unnecessarily
  // ✅ 불필요하게 재계산하지 않음
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

If this doesn’t help, then the problem is that at least one of your dependencies is different from the previous render. You can debug this problem by manually logging your dependencies to the console: 그래도 도움이 되지 않는다면 의존성 중 하나 이상이 이전 렌더링과 다르기 때문일 수 있습니다. 수동으로 콘솔에 의존성을 로깅하여 이 문제를 디버그할 수 있습니다:

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

You can then right-click on the arrays from different re-renders in the console and select “Store as a global variable” for both of them. Assuming the first one got saved as temp1 and the second one got saved as temp2, you can then use the browser console to check whether each dependency in both arrays is the same: 그런 다음 콘솔에서 서로 다른 리렌더링 시점의 배열을 마우스 오른쪽 버튼으로 클릭하고, 두 배열 모두에 대해 “전역 변수로 저장”을 선택할 수 있습니다. 첫 번째 배열이 temp1로 저장되고 두 번째 배열이 temp2로 저장되었다고 가정하면, 브라우저 콘솔을 사용하여 두 배열의 각 의존성이 동일한지 확인할 수 있습니다:

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
                               // 각 배열의 첫번째 의존성이 동일한가?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
                               // 각 배열의 두번째 의존성이 동일한가?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...
                               // ... 나머지 모든 의존성에 대해 반복 ...

When you find which dependency breaks memoization, either find a way to remove it, or memoize it as well. 어떤 의존성이 메모화를 방해하는지를 찾았다면, 그 의존성을 제거할 방법을 찾거나, 함께 메모화하세요.

I need to call useMemo for each list item in a loop, but it’s not allowed 루프에서 각 목록 항목에 대해 useMemo를 호출해야 하는데 허용되지 않는다고 합니다

Suppose the Chart component is wrapped in memo. You want to skip re-rendering every Chart in the list when the ReportList component re-renders. However, you can’t call useMemo in a loop: Chart 컴포넌트가 memo로 감싸져 있다고 가정해 봅시다. ReportList 컴포넌트가 리렌더링할 때 목록의 모든 차트를 리렌더링하는 것을 건너뛰고 싶을 수 있습니다. 하지만 useMemo를 루프 안에서 호출할 수는 없습니다:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 You can't call useMemo in a loop like this:
        // 🔴 루프 안에서는 useMemo를 호출할 수 없습니다:
        const data = useMemo(() => calculateReport(item), [item]);
        return (
          <figure key={item.id}>
            <Chart data={data} />
          </figure>
        );
      })}
    </article>
  );
}

Instead, extract a component for each item and memoize data for individual items: 대신, 각 항목에 대한 컴포넌트를 추출하고 개별 항목에 대한 데이터를 메모화하세요:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ Call useMemo at the top level:
  // ✅ useMemo는 컴포넌트 최상단에서 호출하세요:
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

Alternatively, you could remove useMemo and instead wrap Report itself in memo. If the item prop does not change, Report will skip re-rendering, so Chart will skip re-rendering too: 또는 useMemo를 제거하고 대신 Report 자체를 memo로 감쌀 수 있습니다. item prop이 변경되지 않으면 Report가 리렌더링을 건너뛰므로 Chart도 리렌더링을 건너뜁니다:

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  const data = calculateReport(item);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
});