[react 리액트] 초간단 동적으로 CSS 클래스 설정하기

회원가입을 하다보면 내가 양식에 맞는 입력값을 넣기 전까지
INPUT 창이 붉은색으로 나타나는 경우를 종종 봤을 것이다.
이처럼 조건이나 상황에 따라 스타일이 동적으로 변하도록 설정하는 방법을 알아보자.

 

 

0. 들어가며

동적으로 CSS를 설정하는 방법은 태그에 인라인으로 직접 설정하는 방법도 있으나 인라인 스타일은 모든 css 설정 중 최우선으로 여겨지기 때문에 주의가 필요하다.

<label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>

 

 

 

 

1. 요약

스위치 역할을 하는 조건을 하나 만들고 그 조건을 클래스에 넣어 스위치에 따라 클래스에 조건이 붙어다 안붙었다. 하는 식으로 만든다.

 

 

 

2. 클래스에 벡틱과 삼항연산자를 활용하여 상황에따라 클래스가 추가되고 안되고를 설정한다.

*클래스를 추가하려면 띄어쓰기 한번해야하는 것을 잊지 말자.

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

        <label>Course Goal</label>

        <input type="text" onChange={goalInputChangeHandler} />

      </div>

 

 

 

3. css 에 해당 클래스가 추가되었을 떄 스타일을 작성한다.

*클래스 두개가 다 해당할때 는 .클래스.클래스 로 이어붙여야하는 것을 잊지 말자.

.form-control.isValid input {
  border-color: red;
  background-color: rgb(247, 117, 117);
}

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