“Material UI”를 사용하여 “Classes Props”로 여러 클래스를 추가하는 방법 – 단계별 가이드

“Classes Props”를 사용하여 Material UI에서 여러 클래스 추가하는 방법

React에서 Material UI를 사용할 때, 컴포넌트에 여러 클래스를 추가해야 할 때가 생길 수 있습니다. 이 블로그 포스트에서는 classNames이나 clsx와 같은 외부 패키지에 의존하지 않고 이를 수행하는 다양한 방법을 살펴보겠습니다.

문자열 보간법 사용

가장 간단하고 직관적인 방법은 문자열 보간법을 사용하여 여러 클래스를 추가하는 것입니다. 컴포넌트의 className 프롭 내에서 클래스 이름을 연결할 수 있습니다. 다음은 예시입니다:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

clsx 사용

대체로 clsx 라이브러리를 사용하는 것도 가능한 방법입니다. clsx는 클래스 이름을 조건부로 연결하는 간결한 방법을 제공합니다.

먼저, clsx를 설치하세요:

npm install --save clsx

그런 다음, 컴포넌트 내에서 clsx를 임포트하세요:

import clsx from 'clsx';

마지막으로 clsx를 사용하여 클래스를 결합하세요:

<div className={clsx(this.props.classes.container, this.props.classes.spacious)}>

classnames 패키지 사용

보다 강력하고 유연한 솔루션을 선호한다면 classnames 패키지를 사용할 수 있습니다. 이 패키지를 사용하면 다양한 구문 옵션을 사용하여 클래스를 연결할 수 있습니다.

먼저, classnames 패키지를 설치하세요:

npm install classnames

그런 다음, 컴포넌트 내에서 classnames를 임포트하세요:

import classNames from 'classnames';

마지막으로 classnames를 사용하여 클래스를 결합하세요:

<div className={classNames(this.props.classes.container, this.props.classes.spacious)}>

extend 속성 사용

Material UI에서는 추가적인 스타일을 추가하면서 하나의 클래스를 다른 클래스에서 상속받을 수 있는 extend 속성을 활용할 수도 있습니다. 이 방법은 특정 컴포넌트를 위해 공통 스타일을 확장하고자 할 때 유용합니다.

다음은 예시입니다:

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  spaciousContainer: {
    extend: 'container',
    padding: 10
  },
});

// ...

<div className={this.props.classes.spaciousContainer}>

결론

Material UI 컴포넌트에 여러 클래스를 추가하는 것은 사용자 정의 스타일과 레이아웃을 구현하는 데 중요합니다. 이 블로그 포스트에서는 string interpolation, clsx, classnames, extend 속성을 포함한 다양한 방법을 살펴보았습니다. 이러한 기법을 사용하여 React 컴포넌트에 여러 클래스를 손쉽게 결합하고 적용할 수 있으며, 외부 종속성 없이 Material UI를 활용할 수 있습니다.

참고 자료 : 

reactjs