React에서 여러 클래스 이름 사용하기

복잡한 응용 프로그램을 개발할 때 여러 클래스가 있는 HTML 요소를 갖는 것은 드문 일이 아닙니다. HTML과 CSS에 익숙하다면 여러 클래스를 설정하는 구문에 익숙할 것입니다. 이 기사에서는 React에서 이를 수행하는 여러 가지 방법을 살펴보겠습니다.

React의 여러 클래스 이름

대부분의 React 개발자는 간단한 구성 요소 정의를 작성하기 위한 특수 구문인 JSX를 사용합니다. 그 구문은 HTML과 매우 유사하므로 대부분의 React 개발자가 선호합니다. 클래스 설정과 관련된 몇 가지 중요한 차이점이 있습니다.

HTML에서는 class 속성을 사용하여 클래스를 설정하는 데 익숙할 것입니다. React 컴포넌트는 클래스의 인스턴스로 정의할 수 있으므로 Class는 예약어입니다. 따라서 개발자는 대신 className 속성을 사용해야 합니다.

JSX에서 className 속성은 문자열과 동일하게 설정되어야 합니다. 여러 클래스가 있는 간단한 정의는 다음과 같습니다.

<h1 className="classOne classTwo">Hi! Try edit me</h1>

또는 className 속성을 문자열을 반환하는 JavaScript 표현식과 동일하게 설정할 수 있습니다. 표현식이 JavaScript 코드로 올바르게 해석되도록 하려면 중괄호 사이에 표현식을 배치해야 합니다. 예를 살펴보겠습니다.

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

이 예에서는 변수에 포함된 일반 문자열과 문자열 값을 추가합니다. 표현식이 평가되면 className 속성은 'classOne white' 문자열과 같습니다.

+ 연산자를 두 개의 문자열을 하나로 결합하는 .concat() 메서드로 교체하여 표현식을 더 읽기 쉽게 만들 수 있습니다.

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

반응 .join() 메서드

이 표준 JavaScript 방법은 문자열 값 배열을 여러 className 값으로 변환하는 데 유용합니다. JavaScript 메소드이기 때문에 JSX에서 중괄호 사이에 전체 표현식을 배치해야 합니다.

기본적으로 결합된 문자열 값은 쉼표로 구분됩니다. 그러나 className 값의 유효한 목록을 생성하려면 단일 공백으로 구분해야 합니다. 다행히도 단일 공백 ​​문자열 ' '을 메서드에 대한 인수로 전달하여 구분 기호를 지정할 수 있습니다. 다음은 예입니다.

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

playcode의 styles.css 파일에서 세 가지 클래스를 정의했습니다.

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

중괄호 안의 코드가 실행되면 세 가지 클래스가 모두 적용된 것을 확인할 수 있습니다.

소스 코드를 살펴보고 클래스가 <p> 요소에 적용되었는지 확인할 수도 있습니다.

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

React의 사용자 정의 함수

ES6에서는 배열 구조화 구문을 사용하여 className 값으로 사용할 수 있는 형식화된 문자열을 반환하는 우아한 사용자 정의 함수를 만들 수 있습니다.

코드를 살펴보겠습니다.

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

이 함수는 인수를 배열 항목으로 취급하고 .join() 메서드를 사용하여 className 값의 형식화된 목록을 반환합니다.

함수를 사용할 때 원하는 만큼 문자열 값을 전달할 수 있습니다.

React의 조건부 className

className 값을 조건부로 적용하면 사용자 입력을 기반으로 요소의 모양을 변경하는 데 유용할 수 있습니다. 예를 들어 애플리케이션에 어둡고 밝은 테마가 있는 경우 배경도 밝은 색조에서 어두운 색조로 전환되어야 합니다. 다음은 코드 예입니다.

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

lightBackground 변수는 darkTheme 상태 속성 값을 기반으로 두 문자열 중 하나가 할당됩니다. classNameGenerator("") 함수를 호출하는 것 외에도 + 연산자를 사용하여 변수의 조건부 값도 포함합니다.

더 나은 시연을 위해 playcode 애플리케이션에는 darkTheme 속성의 boolean 값을 전환하는 버튼이 포함되어 있습니다.