[typescript] JSX에서 컴포넌트에 CSS 클래스 추가하는 방법

18 Dec 2023

typescript

import React from 'react';
import './styles.css';

const MyComponent: React.FC = () => {
  return (
    <div className="my-class">
      <p>This is my component.</p>
    </div>
  );
}

export default MyComponent;

위 예제에서는 className 속성을 사용하여 CSS 클래스를 추가했습니다. 이렇게 하면 해당 컴포넌트에 “my-class”라는 CSS 클래스가 적용됩니다.

또 다른 방법으로는 템플릿 문자열을 사용하여 동적으로 CSS 클래스를 추가할 수도 있습니다. 예를 들어:

import React from 'react';
import './styles.css';

const MyComponent: React.FC = () => {
  const isSpecial = true;
  return (
    <div className={`my-class ${isSpecial ? 'special' : ''}`}>
      <p>This is my component.</p>
    </div>
  );
}

export default MyComponent;

이렇게 하면 isSpecial 변수의 값에 따라 “special” 클래스가 동적으로 추가됩니다.

이러한 방법들을 사용하여 JSX에서 컴포넌트에 CSS 클래스를 추가할 수 있습니다.