JSX에서는 조건에 따라 클래스를 지정하는 것이 매우 일반적입니다. React 컴포넌트의 DOM 엘리먼트에 클래스를 동적으로 할당하려면 어떻게 해야 할까요? 이 블로그 포스트에서는 JSX를 사용하여 조건부로 클래스를 추가하는 방법에 대해 배워보겠습니다.

클래스 추가하기

React에서 클래스를 추가하는 가장 기본적인 방법은 className 속성을 사용하는 것입니다. JSX에서 className은 HTML의 class 속성을 대신하는 속성입니다.

다음은 간단한 예제입니다.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const isEnabled = true;
    return (
      <div className={isEnabled ? 'enabled' : 'disabled'}>
        내 컴포넌트
      </div>
    );
  }
}

위의 예제에서 isEnabled이 true라면 클래스로 ‘enabled’를 추가하고, false라면 ‘disabled’를 추가합니다.

조건부 클래스 추가하기

React에서 조건부로 클래스를 추가하는 방법은 JavaScript의 조건부 연산자를 사용하여 매우 간단하게 처리할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const isHovered = true;
    return (
      <div className={isHovered ? 'hovered' : ''}>
        내 컴포넌트
      </div>
    );
  }
}

위의 예제에서 isHovered가 true인 경우 ‘hovered’ 클래스를 추가하고, false인 경우 빈 문자열을 추가합니다.

외부 라이브러리 사용하기

때로는 복잡한 조건부 스타일링을 위해 classnames와 같은 외부 라이브러리를 사용하는 것이 유용할 수 있습니다.

classnames를 사용하면 조건부 클래스를 더 쉽게 처리할 수 있습니다.

import React from 'react';
import classNames from 'classnames';

class MyComponent extends React.Component {
  render() {
    const isPrimary = true;
    return (
      <div className={classNames('button', { 'primary': isPrimary })}>
        내 컴포넌트
      </div>
    );
  }
}

위의 예제에서 classNames를 사용하여 ‘button’ 클래스와 조건부로 ‘primary’ 클래스를 추가합니다.

결론

JSX에서 조건부 클래스를 지정하는 것은 매우 쉽습니다. JavaScript의 조건부 연산자나 외부 라이브러리를 활용하여 동적으로 클래스를 추가할 수 있습니다.

React 공식문서와 MDN 웹 문서에서 더 많은 정보를 찾을 수 있습니다.