React에서 조건부 스타일 적용

1. React의 조건부 스타일
2. React에서 조건부 클래스 적용

React는 아름답고 반응이 빠른 UI를 자유롭게 구축할 수 있기 때문에 널리 사용되는 프런트 엔드 프레임워크입니다. 스타일링은 이 과정에서 가장 중요한 측면 중 하나입니다.

이 기사에서는 React에서 조건부 스타일을 적용하는 여러 가지 방법을 보여주고자 합니다.

React의 조건부 스타일

라이브러리를 사용하면 사용자 입력을 값으로 저장하고 사용자의 전반적인 작업 및 입력에 따라 조건부 스타일을 적용할 수 있습니다.

JSX에서 인라인 조건부 스타일 적용

첫 번째 확실한 방법은 인라인 스타일을 정의하는 것입니다. HTML과 달리 JSX의 인라인 스타일은 유효한 JavaScript입니다.

이러한 이유로 특정 스타일의 값을 결정하는 조건을 설정하기 위해 삼항 연산자를 자유롭게 사용할 수 있습니다. 예를 들어 다음을 수행할 수 있습니다.

export default function App() {
  let danger = true;
  return (<div className = 'App'><h1 style = {
    {
      color: danger ? 'red' : 'green'
    }
  }>Some Text</h1>
    </div>);
}

즉, danger 변수의 값이 true이면 color CSS 속성에 red 값이 있어야 합니다. 그렇지 않은 경우 녹색이 됩니다.

JSX 내부뿐만 아니라 외부에서도 스타일 객체를 정의할 수 있습니다. 구성 요소를 호출할 때 스타일을 직접 적용하는 경우 이중 중괄호를 사용해야 합니다.

JSX에 내용이 JavaScript 표현식임을 알리려면 첫 번째 중괄호 쌍이 필요합니다. JavaScript에서 개체의 여는 태그와 닫는 태그로 두 번째 쌍이 필요합니다.

다음은 JSX 외부에서 style 객체를 정의하고 JSX에서만 참조하는 방법입니다.

export default function App() {
  let danger = true;
  let inlineStyle = { color: danger ? "red" : "green" };
  return (
    <div className="App">
      <h1 style={inlineStyle}>Some Text</h1>
    </div>
  );
}

이것은 일부 사람들을 위해 인라인 스타일을 정의하는 데 더 읽기 쉬운 접근 방식입니다. 라이브 데모를 확인하려면 CodeSandbox로 이동하세요.

React에서 조건부 클래스 적용

어떤 사람들은 인라인 스타일보다 클래스를 적용하는 것을 선호합니다. 원리는 동일합니다.

삼항 연산자를 사용하여 동적 클래스 이름을 생성합니다. 더 나아가 세 가지 옵션을 제공할 수 있습니다.

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={danger? 'dangerText': warning ? : 'warningText' : 'regularText'}>Some Text</h1>
    </div>
  );
}

이 경우 danger 변수가 참인지 확인합니다.

그렇다면 dangerText 클래스를 적용합니다. 그렇지 않은 경우 경고 변수가 참인지 다시 확인합니다.

그렇다면 warningText 클래스를 적용합니다. 그렇지 않은 경우 regularText를 적용합니다.

JSX의 요소에 클래스를 적용하기 위해 className 속성을 사용합니다.

인라인 스타일 대신 조건부로 클래스를 적용하면 CSS를 사용하여 요소의 모양을 더 자유롭게 사용자 정의할 수 있습니다.

템플릿 리터럴을 사용하여 React에서 클래스를 조건부로 적용

템플릿 리터럴을 사용하여 변수 값을 클래스 이름으로 적용할 수도 있습니다. 그런 다음 변수 값을 동적으로 변경할 수 있습니다.

정적 및 동적 클래스 이름도 결합할 수 있습니다. 예를 살펴보겠습니다.

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 classNamme={`large ${errorNotification}`}>Some Text</h1>
    </div>
  );
}

errorNotification 변수에 warning 값이 포함된 경우 className 속성에는 large 및 warning의 두 값이 있습니다.

classnames 패키지를 사용하여 React에서 클래스를 조건부로 적용

마지막으로 많은 사람들이 classnames라는 외부 패키지를 사용하여 동적으로 React에 클래스를 적용합니다.

classnames() 함수는 잠재적인 클래스 이름이 있는 개체를 속성으로 받아들이고 이를 값으로 적용하기 위한 조건으로 받아들입니다. 한 번 보자:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={classNames({warningText: error})}>Some Text</h1>
    </div>
  );
}

패키지의 기능에 대해 자세히 알아보려면 공식 문서를 읽어보세요.