React 구성 요소에 여러 클래스 이름 추가

1. 템플릿 리터럴 메서드를 사용하여 React 구성 요소에 여러 classNames 추가
2. classnames 패키지를 사용하여 React 구성 요소에 여러 classNames 추가
3. classnames 패키지와 .map 메서드를 사용하여 React 구성 요소에 여러 classNames 추가
4. 결론

React의 classNames는 JavaScript의 클래스와 동일한 기능을 수행합니다. ‘class’는 React에서 예약어이기 때문에 클래스 대신 사용됩니다.

구성 요소에 여러 classNames를 추가하면 해당 구성 요소에 대한 몇 가지 조건을 설정할 수 있는 여지가 생깁니다. 하나의 className은 스타일을 설정하는 데 사용됩니다. 다른 하나는 조건을 설정하는 데 사용됩니다.

이것은 버튼이 있는 웹 페이지를 만들 때 이상적입니다.

또한 특정 상황에서 원래 스타일을 덮어쓰도록 구성 요소에 추가 스타일을 추가할 수 있습니다. 추가 className을 추가하면 이 작업을 원활하게 수행할 수 있습니다.

게다가, 여러 className을 사용하여 스타일을 설정하면 단일 className이 너무 많은 스타일로 오버로드될 수 있으므로 CSS 파일을 더 쉽게 읽고, 추적하고, 조정할 수 있습니다. 또한 여러 CSS 클래스에 유사한 속성이 있는 경우 수정 및 추가 기능을 쉽게 하기 위해 유사한 속성에 대해 다른 클래스를 만들어야 합니다.

구성 요소에 여러 classNames를 추가하는 다양한 방법을 살펴보겠습니다.

템플릿 리터럴 메서드를 사용하여 React 구성 요소에 여러 classNames 추가

템플릿 문자열이라고도 하는 템플릿 리터럴을 사용하면 백틱으로 묶인 여러 표현식을 만들고 조작할 수 있으며 그 뒤에 $ 기호와 중괄호가 붙습니다.

CSS 스타일을 함께 사용하여 여러 classNames의 효과를 보여주는 버튼 웹페이지 예제를 만들 것입니다. 프로젝트 폴더의 App.js 파일로 이동하여 다음 코드를 작성합니다.

코드 조각- App.js:

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

템플릿 리터럴은 setClassNames 함수를 호출할 때 classNames를 수용하는 데 편리합니다. 여기에서 클래스 red와 blue를 각각 설정합니다.

그런 다음 App.css 파일 내에서 약간의 코딩을 수행합니다.

코드 조각- App.css:

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

출력:

button onClick 이벤트 리스너를 사용하여 두 버튼 중 하나를 눌렀을 때 React에게 무엇을 해야 하는지 알려줍니다. 버튼 중 하나를 누르면 하나의 className이 활성화되고 다른 버튼을 누르면 다른 className이 호출되고 색상이 변경되는 것을 볼 수 있습니다.

classnames 패키지를 사용하여 React 구성 요소에 여러 classNames 추가

React가 널리 받아들여지는 이유 중 하나는 종속성 패키지 덕분에 잠재적인 개발 및 조정의 여지가 무제한이기 때문입니다.

classnames 패키지는 구성 요소에 여러 classNames를 추가하는 데 적용할 수 있는 또 다른 방법입니다. 템플릿 리터럴 방법보다 적은 코드를 작성하는 데 도움이 되며 둘 이상의 classNames를 처리할 때 더 잘 적용됩니다.

프로젝트 폴더를 만들었으면 여전히 내부에 있는 프로젝트 폴더로 이동하여 다음을 사용하여 classnames 패키지를 설치합니다.

npm install classnames

그런 다음 App.js 파일로 시작하여 코딩을 시작합니다.

첫 번째 예제와 동일한 스타일을 사용하고 있습니다. 여기서는 CSS 스니펫을 반복하지 않습니다.

코드 조각- App.js:

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

출력:

classnames 패키지가 적용되고 div에 래핑됩니다. 여기에서 각 구성 요소에 대해 classNames를 설정한 다음 onClick 이벤트 리스너를 사용하여 각 클래스의 상태를 변경합니다.

클래스에 할당된 버튼 중 하나를 클릭하면 각 className이 켜짐/꺼짐으로 전환되는 것을 볼 수 있습니다.

classnames 패키지와 .map 메서드를 사용하여 React 구성 요소에 여러 classNames 추가

동일한 스타일을 여러 클래스에 동시에 적용하려면 .map 메서드와 함께 classnames 패키지를 사용할 수 있습니다. .map 메소드는 유사한 요소 간에 기능을 수행하는 데 도움이 되는 JavaScript 기능입니다.

프로젝트 폴더를 만든 후에는 여전히 내부에 있는 프로젝트 폴더로 이동하고 다음을 사용하여 classnames 패키지를 설치합니다.

npm install classnames

다음으로 코딩을 진행합니다. 먼저 App.js 파일로:

코드 조각- App.js:

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

className을 선언한 후 .map 함수는 세 가지 클래스를 모두 buttonType 객체에 매핑합니다. 이렇게 하면 여러 클래스에 동일한 함수를 전달할 수 있습니다.

그러면 App.css는 다음과 같이 표시됩니다.

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

출력:

우리는 모든 클래스에 동일한 색상을 할당했고 onClick 이벤트 리스너는 버튼을 토글할 때 이 CSS 기능을 활성화했습니다.

결론

React에서 여러 클래스로 작업하면 다양한 조합을 시도할 수 있으므로 장애물을 해결할 수 있는 다양한 방법이 있습니다. 또한 구성 요소 내에서 여러 스타일과 조건을 수행할 수 있기 때문에 코딩이 훨씬 더 유연하고 버그와 실수를 정확히 찾아낼 수 있습니다.