동적으로 클래스 설정하기(State와 삼항연산자)

State와 삼항 연산자를 이용하여 동적으로 클래스를 설정하여 스타일링하는 방법을 정리해보도록 하겠습니다.

위의 이미지에서 input에 입력값을 넣지 않으면 Course Goal의 색깔을 변경해보도록 하겠습니다.

 

State

// 사용자 입력값 State
const [enteredValue, setEnteredValue] = useState("");

// 사용자 입력값 유효성 State
const [isValid, setIsValid] = useState(true);

State의 기본값을 true로 설정하고 사용자의 입력이 있다면 true, 사용자의 입력이 없다면 false로 업데이트해주는 것이 목표입니다.

 

handler

  const formSubmitHandler = (event) => {
    event.preventDefault();
    
    // 입력값이 없으면 return-------------------------------------
    if (!enteredValue.trim().length) {
      setIsValid(false);
      return;
    }
    //---------------------------------------------------------
    
    props.onAddGoal(enteredValue);
  };

폼에서 전송을 받았는데 사용자 입력값의 길이가 0인 상태에서 사용자 입력값 유효성 State를 false로 업데이트시켜주었습니다.

 

  const goalInputChangeHandler = (event) => {
    if (event.target.value.trim().length) {
    
      // 사용자의 입력값이 있으면 State를 true로 업데이트-----------
      setIsValid(true);
    }
  	// -----------------------------------------------
      
    setEnteredValue(event.target.value);
  };

사용자의 입력이 시작되면 State를 true로 업데이트해주어 클래스 invalid 제거해줘야 하기 때문에

 

input 태그의 onChange를 관리하는 함수에 State 업데이트 함수를 작성해주었습니다.

 

CSS

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

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

사용자의 입력값이 없으면 클래스에 invalid를 추가해주고 invalid 안에 있는 label 태그와 input을 스타일링하는 것이 목표입니다.

 

컴포넌트

<form onSubmit={formSubmitHandler}>
	//isValid가 false 이면 클래스 invalid 동적으로 추가-----------------------
      <div className={`form-control ${!isValid ? "invalid" : ""}`}>
	//-----------------------------------------------------------------
    
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
</form>

 

동적으로 클래스를 설정하기 위해 중괄호를 사용해주었으며 템플릿 리터럴을 이용하였습니다.