동적 CSS 클래스 설정하기

여기 그림과 같은 할일 입력 메뉴가 있습니다.

공백이나 잘못된 입력시 input 부분의 style을 변경해보겠습니다.

1.입력이 가능한지 valid변수 선언 및 설정

const [isValid,setIsValid]=useState(true);

우선 isValid라는 변수를 상태화시켜줍니다. defalut값은 true로 설정해줍니다.

const goalInputChangeHandler = event => {
    if(event.target.value.trim().length>0){
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };



/*JSX*/
<input type="text" onChange={goalInputChangeHandler} value={enteredValue} />

input의 onChange 메소드에 있는 핸들러함수는 해당 input의 값이 변경될 때마다 실행해줍니다.
여기서 input의 값이 공백이 없을 경우 isValid를 true로 바꿔줍니다.

const formSubmitHandler = event => {
    event.preventDefault();
    if(enteredValue.trim().length===0){
      setIsValid(false);
      return;
    }
    props.onAddGoal(enteredValue);
    setEnteredValue(" ");
  };


/*JSX*/
<div className={`form-control ${!isValid? 'invalid' :''}`}>

.form-control.invalid input{
  border-color:red;
  background:#ffd7d7;
}

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

submit했을때의 입력값이 공백 시 isValid를 false로 전환시켜줍니다.

이후 isValid를 조건으로 3항연산자를 통해 div의 class이름명을 바꿔줍니다.

isVaild가 true시 : form-control invalid
isValid가 false시 : form-control

따라서 위 클래스명을 기준으로한 CSS Style도 변경됩니다.