ReactJS의 Toggle 클래스

오늘은 코드 예제를 사용하여 ReactJS에서 클래스를 전환하는 방법을 알아봅니다.

ReactJS의 Toggle 클래스

React는 가상 DOM 아이디어를 사용하여 DOM 요소를 업데이트합니다. 조건문을 사용하여 요소의 클래스 속성을 수정하고 사용자의 선택에 따라 클래스를 렌더링할 수 있습니다.

조건부(삼항) 연산자는 JavaScript에서 세 개의 피연산자를 허용하는 유일한 연산자입니다. 이 연산자는 일반적으로 if...else 식을 대체하는 데 사용됩니다.

세 피연산자는 다음과 같습니다.

1. 필수 조건 뒤에는 물음표(?)가 옵니다.
2. 조건이 true 뒤에 콜론(:)이 오는 경우 표현식이 실행됩니다.
3. 조건이 false인 경우 이 표현식이 실행됩니다.

통사론:

condition ? expressionIfTrue : expressionIfFalse

기능 구성 요소 내에서 조건문을 사용하는 것은 아래 예에서 설명합니다. 클래스 구성 요소는 유사한 전략을 활용할 수 있습니다.

const [className, setClassName] = useState('blue')
return (
    <Fragment><p className = {className ? className : 'blue'}>Hello world!
    </p>
      <button onClick={() => setClassName(null)}>Change to Default</button>
    <button onClick = {() => setClassName('red')}>Change to Red<
        /button>
      <button onClick={() => setClassName('yellow')}>Change to Yellow</button>
    <button onClick = {() => setClassName('green')}>Change to
        Green</button>
    </Fragment>)

위의 예에서는 className 변수를 정의했습니다. 사용자가 이를 Red로 업데이트하면 값이 Red로 설정되고 Default로 업데이트하면 Red 클래스가 제거됩니다.

className이 제공되면 해당 클래스를 사용합니다. 그렇지 않으면 blue를 기본 클래스로 사용합니다. 클래스가 많고 없는 경우 default 클래스를 사용하려는 경우에 유용합니다.

React.js와 호환되는 Replit(여기서는 demo)에서 위의 코드를 실행합니다. 다음과 같은 결과가 표시됩니다.

출력: