`className` 은 왜 React에서 중요한가?

React로 개발을 하다 보면 HTML과 비슷해 보이는 코드를 작성하게 됩니다.
하지만 HTML에서 사용하는 class 속성이 React에서는 className으로 바뀐다는 사실을 알게 됩니다.
이번 포스팅에서는 왜 React에서 className을 사용하는지와 그 사용 방법을 간단히 정리해 보겠습니다.

---

class vs className

HTML에서 요소에 CSS 클래스를 적용할 때는 class 속성을 사용합니다.

<div class="my-class">Hello, World!</div>

하지만, React에서는 class 대신 className을 사용해야 합니다:

<div className="my-class">Hello, World!</div>

---

이유는 무엇일까?

JavaScript에서는 class가 예약어로 사용되기 때문에, React는 이를 피하기 위해 className이라는 대체 속성을 사용합니다.
className을 통해 CSS 스타일링은 그대로 적용되면서도 JavaScript 코드와 충돌을 방지할 수 있습니다.

---

className 사용 방법

React에서 className을 사용하는 방법은 HTML과 매우 유사합니다.
다만, JavaScript 표현식과 결합하거나 동적으로 클래스를 변경할 수 있다는 점이 특징입니다.

예제 1: 기본 사용법

const App = () => {
    return <div className="container">Hello, React!</div>;
};

예제 2: 여러 클래스 적용

여러 클래스를 적용할 때는 공백으로 구분합니다.

const App = () => {
    return <div className="container primary">Hello, React!</div>;
};

예제 3: 동적 클래스 적용

JavaScript 표현식을 활용해 조건에 따라 클래스를 동적으로 설정할 수 있습니다.

const App = ({ isActive }) => {
    return (
        <div className={isActive ? "container active" : "container"}>
            Hello, React!
        </div>
    );
};

---

className과 JavaScript 연동

React의 className 속성은 JavaScript와 연동해 동적으로 스타일을 제어할 때 유용합니다.
특히, 여러 클래스를 조합할 때 템플릿 리터럴이나 라이브러리를 활용할 수 있습니다.

예제: 템플릿 리터럴

const App = ({ theme }) => {
    return <div className={`container ${theme}`}>Hello, React!</div>;
};

예제: classnames 라이브러리 사용

classnames 라이브러리는 조건부 클래스 적용을 더 간단히 도와줍니다.

npm install classnames

import classNames from "classnames";

const App = ({ isActive, theme }) => {
    const containerClass = classNames("container", {
        active: isActive,
        [theme]: theme,
    });

    return <div className={containerClass}>Hello, React!</div>;
};

---

결론

React에서 className은 HTML의 class 속성을 대체하는 필수적인 개념입니다.
다음과 같은 점을 기억하세요:
1. React에서는 class 대신 className을 사용해야 합니다.
2. JavaScript와 연동하여 동적으로 클래스를 설정할 수 있습니다.
3. classnames와 같은 라이브러리를 활용하면 더 간결하게 조건부 클래스를 관리할 수 있습니다.

이제 React에서 className을 활용해 스타일링을 적용해 보세요!