리액트) 동적으로 클래스 추가해서 css 효과주기

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자!

 

 <div className={`form-control ${!isValid ? "invalid" : ""}`}>
 	<label> </label>
    <input> </input>

 

동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. 

 

 

.form-control.invalid input {
  border-color: red;
  background: rgb(246, 197, 197);
}

.form-control.invalid label {
  color: red;
}

 

결과

입력없이 버튼을 클릭하면 글씨와 인풋창이 css 효과대로 스타일이 변경됩니다.

 

유저가 바로 인풋에 입력을 하면 원래대로 돌아옵니다. 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓