React에서 Snake Case 이름으로 Material-UI 아이콘을 동적으로 불러오는 방법

스네이크 케이스 이름을 사용하여 아이콘을 동적으로 로드하는 방법 (React, Material-UI)

스네이크 케이스 이름을 사용하여 React에서 아이콘을 동적으로 로드해야 하는 적이 있나요? Material-UI는 아이콘을 직접 가져오는 방법에 대한 지침을 제공하지만, 아이콘 이름을 문자열 변수로 저장하고 해당 아이콘 컴포넌트를 동적으로 로드해야하는 상황이 발생할 수 있습니다. 이 블로그 포스트에서는 Material-UI와 React를 사용하여 이를 구현하는 다양한 접근 방식을 탐색해 보겠습니다.

접근 방식 1: material-ui Icon 컴포넌트 사용

행운이게도, material-ui에는 아이콘을 동적으로 렌더링할 수 있게 해주는 Icon 컴포넌트가 있습니다. 이 컴포넌트는 아이콘 이름을 prop으로 받아들이고 자동으로 적절한 형식으로 변환합니다. 그러나 이 방식을 사용하면 번들 크기가 크게 증가할 수 있으므로 번들 크기에 대한 우려가 있다면 아이콘 SVG를 다른 소스에서 제공하는 등의 대안적인 방법을 고려해야 할 필요가 있습니다.

@material-ui/core/Icon에서 Icon을 가져옵니다.

// 스네이크 케이스 이름을 파스칼 케이스로 변환하는 함수 생성
function upperFirst(string) {
  return string.slice(0, 1).toUpperCase() + string.slice(1, string.length);
}

function fixIconNames(string) {
  const name = string.split('_').map(upperFirst).join('');
  // 표준 패턴을 따르지 않는 특수한 경우 처리
  if (name === '3dRotation') {
    return 'ThreeDRotation';
  } else if (name === '4k') {
    return 'FourK';
  } else if (name === '360') {
    return 'ThreeSixty';
  }
  return name;
}

// 사용법
render() {
  const iconName = fixIconNames(props.iconName);
  return (
    <Icon>{iconName}</Icon>
  );
}

접근 방식 2: MUI 5에서 Material-UI 아이콘 사용

Material-UI 버전 5를 사용하고 있다면 `@mui/icons-material` 패키지를 사용하여 아이콘에 액세스할 수 있습니다. 이 접근 방식을 사용하면 특정 아이콘을 동적으로 가져올 수 있습니다.

@mui/icons-material에서 *로 Muicon을 가져옵니다.

const Icon = Muicon[props.iconName];

// 사용법
render() {
  return (
    <Icon fontSize="large" sx={{ px: 1 }} />
  );
}

접근 방식 3: 아이콘을 동적으로 렌더링하는 컴포넌트 생성

더 유연한 솔루션을 선호한다면, 이름에 따라 아이콘을 동적으로 렌더링하는 사용자 정의 컴포넌트를 만들 수 있습니다.

import React, { createElement } from "react";
import * as MuiIcons from "@material-ui/icons";

export default function DynamicIcon({ iconName }) {
  return (
    <div>
      {createElement(MuiIcons[iconName])}
    </div>
  );
}

// 사용법
<DynamicIcon iconName="Add" />
<DynamicIcon iconName="Anchor" />

이제 React와 Material-UI를 사용하여 스네이크 케이스 이름을 사용하여 아이콘을 동적으로 로드하고 렌더링하는 몇 가지 방법을 살펴보았습니다. 필요에 맞는 접근 방식을 선택하고 번들 크기와 유연성과 같은 trade-off를 고려하세요. 이러한 기술을 활용하여 동적으로 아이콘을 로드하여 애플리케이션의 유연성과 기능성을 향상시킬 수 있습니다.

이 블로그 포스트가 아이콘 로딩에 관한 문제를 해결하는 데 도움이 되었기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs