React useMemo

사내 프로젝트에서 특정 컴포넌트에서 onMouseMoveEvent가 발생되면
팝업을 띄워주는 부분이 있었는데 onMouseMoveEvent가 발생될 때 마다
특정 컴포넌트 렌더링을 하는 어마 무시한 현상이 있었다.

해당 현상을 수정하기 위해 해당 부분을 React 메모이제이션을 이용하여 렌더링 최적화를 하기로 하였다.

React 메모이제이션 관련 함수

• React.memo
• useMemo
• useCallback

useCallback 은 함수를 메모이제이션할때 유용한 것 같았고
React.memo나 useMemo 중에 useMemo를 선택하여 시도하였다.

몇 번의 시행 착오를 통해 아래와 같이 작성하여 반영하였더니 원하는 결과를 얻을 수 있었다.

  /**useMemo를 이용한 무기 목록 렌더링 최적화 */
  const MemoizedInventoryItemWeaponList = useMemo(
    () => (
      <InventoryItemWeaponList
        items={items}
        selectedItemId={itemId}
      />
    ),
    [items, itemId],
  );

...

return (
  ...
  {MemoizedInventoryItemWeaponList}  
)

위와 같이 useMemo 를 이용하여 해당 콤포넌트를 감싸고 items이나 itemId가 변경되었을 경우만 컴포넌트를 렌더링 하도록 하였다.