React에서 className 값을 동적으로 적용

1. React에서 동적 className 값 설정
2. 기본 JavaScript를 사용하여 React에서 동적 className 값 설정
3. 문자열 리터럴(ES6)을 사용하여 React에서 동적 className 값 설정

현대 사용자는 고객 경험과 관련하여 높은 기대치를 설정합니다. 그들은 어두운 모드와 같은 기능과 자신의 행동에 반응하는 직관적인 인터페이스를 원합니다.

웹 개발자는 이러한 기능을 구현하기 위해 사용자 작업에 따라 클래스와 스타일을 동적으로 업데이트하는 방법을 찾아야 합니다.

className 속성에는 고급 애플리케이션 및 컨테이너에 대한 여러 값이 포함됩니다. 여러 값을 className에 설정하려고 하지만 className 값 중 하나만 동적이면 다양한 방법으로 이를 수행할 수 있습니다.

React에서 동적 className 값 설정

React에서는 className 속성을 사용하여 요소에 클래스를 추가합니다. className 속성은 복잡한 웹 애플리케이션을 구축할 때 여러 값을 포함합니다.

React 애플리케이션을 구축할 때 return 문 내에서 JavaScript 표현을 허용하는 템플릿 언어 JSX를 사용합니다. JavaScript 표현식을 중괄호 {}로 감싸기만 하면 이 대괄호 사이의 모든 항목이 평가됩니다.

className 속성에 여러 값을 설정할 수 있습니다. 일부는 일정하고 일부는 동적으로 적용됩니다.

React에서 이를 수행하는 구체적인 방법을 살펴보겠습니다.

기본 JavaScript를 사용하여 React에서 동적 className 값 설정

동적 className 값을 추가하는 가장 간단한 방법은 중괄호를 결합하고 className 속성을 상태 변수와 동일하게 설정하는 것입니다. 이것은 모든 버전의 JavaScript에서 사용할 수 있는 매우 간단한 기능입니다.

예:

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={"App " + border}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

이 예제에서는 useState() 후크를 사용하여 border 상태 변수의 기본값을 blackBorder로 설정했습니다. CSS에서 우리는 blackBorder 클래스 규칙을 정의했습니다. 이 규칙은 모든 컨테이너에 2픽셀 검은색 테두리를 적용합니다.

return 문 내에서 {} 중괄호 구문을 사용하여 두 개의 className 값을 포함했습니다. App 클래스는 상수인 반면 두 번째 className 값은 border 상태 변수의 값에 따라 달라집니다.

사용자가 className을 입력할 수 있도록 텍스트 입력을 구현할 수 있으며 border 값을 업데이트합니다. 데모를 직접 확인하고 greenBorder, blackBorder, redBorder 값 중 하나를 입력하고 어떤 일이 발생하는지 확인하십시오.

문자열 리터럴(ES6)을 사용하여 React에서 동적 className 값 설정

또는 백틱(문자열 리터럴이라고도 함)을 사용하여 className 특성에 대한 동적 값을 정의할 수 있습니다.

예:

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={`App ${border}`}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

이 구문은 훨씬 더 읽기 쉽습니다. 중괄호의 이중 사용에 주의하세요.

JSX가 중괄호 사이에 JavaScript 표현식이 있음을 이해하려면 외부 쌍이 필요합니다.

백틱을 사용할 때 달러 기호는 변수에 대한 참조를 나타냅니다. 예를 들어, ${someVariable}이라고 썼다면 자바스크립트는 변수의 현재 값을 찾는 것을 알 것입니다.

그렇지 않으면 모든 것이 이전과 동일합니다.