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를 사용할 때는 {} 중괄호를 사용하면 적용된다!