React에서 className 값을 조건부로 설정

1. React에서 className을 조건부로 설정
2. 삼항 연산자를 사용하여 React에서 className을 조건부로 설정
3. classNames 패키지를 사용하여 React에서 className을 조건부로 설정
4. clsx() 함수를 사용하여 React에서 className을 조건부로 설정

온라인 고객이 온라인 쇼핑을 할 수 있는 단일 목적지를 갖게 되어 행복했던 시절은 오래 전에 지나갔습니다. 요즘 인터넷 사용자는 온라인에서 시간을 보낼 수 있는 수많은 옵션이 있으며 고객 경험에 대한 기대치가 높아지고 있습니다.

기업은 단순해 보일 수 있지만 개발 및 유지 관리에 많은 작업이 필요한 사용자 친화적인 웹 사이트를 개발해야 한다는 압박을 받고 있습니다.

React에서 className을 조건부로 설정

React는 웹 사이트 UI 개발을 위한 널리 사용되는 JavaScript 기반 프레임워크입니다. HTML과 같은 템플릿 언어 JSX를 사용하지만 동적 기능이 있습니다.

JSX의 가장 큰 장점 중 하나는 속성을 조건부로 적용할 수 있다는 것입니다. 클래스는 className 속성을 사용하여 설정됩니다(class는 React에서 예약어임).

인라인 스타일은 styles 속성을 사용하여 설정할 수 있습니다.

className 속성을 조건부로 설정하면 여러 면에서 유용할 수 있습니다. 예를 들어 사용자가 어두운 모드와 밝은 모드 사이를 전환할 수 있도록 하는 스위치 요소를 구현할 수 있습니다.

className 속성의 최종 값을 결정하는 조건은 state 또는 props 객체의 값에 따라 다릅니다. 상태는 텍스트 필드 또는 확인란 버튼의 값과 같은 사용자 입력을 기반으로 변수를 유지하고 업데이트하는 데 사용됩니다.

Props 개체는 상위 구성 요소에서 하위 구성 요소로 전달되는 데이터를 보유합니다. props 및 className 값을 변경하면 전체 구성 요소가 다시 렌더링되어 비교가 실행되고 className 속성 값이 업데이트됩니다.

더 이상 고민하지 않고 스타일을 조건부로 적용하는 방법을 살펴보겠습니다.

삼항 연산자를 사용하여 React에서 className을 조건부로 설정

JSX를 사용하면 특정 값을 반환하는 유효한 JavaScript 표현식과 동일한 속성을 설정할 수 있습니다. 예를 들어 className="dark"는 항상 className을 'dark'로 설정합니다.

대신 className 속성 값을 특정 변수를 평가하여 className 속성 값을 결정하는 JavaScript 표현식으로 설정할 수 있습니다. 예제를 살펴보겠습니다.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

라이브 데모를 직접 사용해 볼 수 있습니다.

이 경우 이중 중괄호를 사용하여 className 특성을 삼항 연산자와 동일하게 설정합니다. 이 연산자는 dark 상태 변수의 값에 따라 최종 className 값을 결정합니다. true인 경우 JavaScript는 'dark' 문자열을 값으로 적용합니다. 그렇지 않으면 아무 것도 적용되지 않습니다.

또한 dark 상태 변수가 true인 경우 X 문자열을 적용하고 false인 경우 Y 문자열을 적용하도록 지시할 수 있습니다.

항상 적용되어야 하는 className 문자열과 조건부로 적용되어야 하는 문자열이 혼합되어 있을 수도 있습니다. 한 번 보자.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={`large ${dark ? "dark" : ""}`}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

이 경우 className 속성은 무엇이든 'large' 값을 가지며 상태 변수가 true인 경우 className 'dark'도 적용됩니다.

템플릿 리터럴(``)은 JavaScript ES6의 최신 기능입니다. React는 JavaScript를 기반으로 하므로 React 앱에서도 사용할 수 있습니다.

classNames 패키지를 사용하여 React에서 className을 조건부로 설정

JavaScript 커뮤니티는 조건에 따라 className 특성에 값을 적용하기 위한 조건을 쉽게 설정하기 위해 classNames 패키지를 개발했습니다. 설치하려면 CLI에 다음 명령을 입력하십시오.

npm install classnames

그런 다음 다음을 수행할 수 있습니다.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={classNames({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

classNames() 함수에 대한 하나의 개체 인수가 있습니다. 여기서 키-값 쌍은 className 값과 이를 적용하기 위한 조건을 나타냅니다.

'large' 값은 해당 값이 true로 설정되어 있으므로 위의 예에서 항상 적용됩니다. 'nightMode'는 상태 변수 dark가 true로 평가되는 경우 className 속성에만 적용됩니다.

clsx() 함수를 사용하여 React에서 className을 조건부로 설정

JavaScript 개발자는 종종 클래스를 조건부로 적용해야 하므로 이 문제를 해결하기 위해 clsx() 함수도 개발했습니다.

clsx() 함수는 다양한 방법으로 사용할 수 있습니다. clsx() 함수를 사용하여 className 속성을 설정하면 애플리케이션이 어떻게 보이는지 살펴보겠습니다.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={clsx({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

함수, 함수가 반환하는 항목, 작동 방식에 대해 자세히 알아보려면 공식 npm 페이지를 확인하세요.