웹 프론트엔드/React
헷갈리는 React 문법 정리 #1 className을 통한 css 조건부 렌더링
JYUN_
2024. 2. 16. 14:49
className={
this.state.clicked ? (this.state.validated ? "success" : "failure")
: ""
}
이 코드는 조건부로 css클래스를 지정하는 데 사용된다.
클래스 이름을 동적으로 설정되는 데 사용되는데, 'className' 속성을 사용하여 요소에 적용되는 css클래스를 결정하는 것이다.
- 'this.state.clicked': 컴포넌트의 'state'객체에서 'clicked'라는 상태 값의 참/거짓 판명
- 'this.state.validated': 또 다른 상태 값인 'validated'의 참/거짓 판명
조건에 따라서 다음과 같은 클래스가 적용된다.
- 'success': 'clicked' 참 + 'validated' 참
- 'failure': 'clicked' 참 + 'validated' 거짓
- " (아무 클래스도 적용되지 않음): 'clicked' 거짓
.success{
background-color: lightgreen;
}
.failure{
background-color: lightcoral;
}
.css를 위와 같이 작성해주면 된다.

처음 코드가 이렇게 생겨서 보고 당황했지만 천천히 생각하면 내가 해결할 수 있는 수준이었다.
코드가 어떤 모양으로 짜 있는지도 중요한 사안!