헷갈리는 React 문법 정리 #1 className을 통한 css 조건부 렌더링

 className={
            this.state.clicked ? (this.state.validated ? "success" : "failure")
              : ""
          }

 

이 코드는 조건부로 css클래스를 지정하는 데 사용된다.

 

클래스 이름을 동적으로 설정되는 데 사용되는데, 'className' 속성을 사용하여 요소에 적용되는 css클래스를 결정하는 것이다.

 

1. 'this.state.clicked': 컴포넌트의 'state'객체에서 'clicked'라는 상태 값의 참/거짓 판명
2. 'this.state.validated': 또 다른 상태 값인 'validated'의 참/거짓 판명

조건에 따라서 다음과 같은 클래스가 적용된다.

• 'success': 'clicked' 참 + 'validated' 참
• 'failure': 'clicked' 참 + 'validated' 거짓
• " (아무 클래스도 적용되지 않음): 'clicked' 거짓

 

.success{
    background-color: lightgreen;
}

.failure{
    background-color: lightcoral;
}

 

.css를 위와 같이 작성해주면 된다.

 

 

처음 코드가 이렇게 생겨서 보고 당황했지만 천천히 생각하면 내가 해결할 수 있는 수준이었다.

코드가 어떤 모양으로 짜 있는지도 중요한 사안!