React에서는 if
문을 render
함수 내에서 사용이 불가하다!
이를 피해서 className
을 동적으로 사용하기 위해 state
에 boolean 값과 삼항연산자를 활용하게 된다.
state = {
isActive : false,
}
onClick = () => {
this.setState({ isActive = !this.state.isActive });
}
<button
type="button"
className={this.state.isActive ? "loginBtn active" : "loginBtn"}
aria-label="login"
onClick={this.onClick}
>
로그인
</button>
위와 같이 클릭 시 값이 true
/ false
이렇게 두가지로만 제한되어 바뀌도록 state 내 value를 boolean
으로 설정한다.
그리고 클릭될 때마다 (onClick
이벤트를 활용하여) true
, false
값이 변경되도록 하였다.
그리고, 그 값이 변경될 때마다, button
의 className
이 변경되도록 className
을 삼항연산자로 지정해준다.
💡 JSX내에서 Javascript를 사용할 때는
{}
중괄호를 사용하면 적용된다!