동적으로 인라인 스타일 설정하기(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로 업데이트시켜주었습니다.

 

컴포넌트

<form onSubmit={formSubmitHandler}>
      <div className="form-control">
      
      // 삼항 연산자를 이용한 동적 스타일링 ---------------------------------
        {/* isValid가 false이면 글자색 red, true이면 글자색 black */}
        <label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>
      // ------------------------------------------------------------
      
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
</form>

label 태그에 인라인 스타일로 삼항 연산자를 이용하여 글자색을 변경해주었습니다.

 

isValid가 false, 즉 사용자 입력값이 없다면 글자색은 red로 설정하고,

 

isValid가 true, 즉 사용자 입력값이 있다면 글자색은 black로 설정해주었습니다.

 

 

결과 1

위의 이미지처럼 사용자 입력값이 없는 상태에서 버튼을 클릭하면 Course Goal의 글자색이 red로 변경됩니다.

 

하지만 입력값을 다시 넣고 버튼을 클릭해도 원래의 글자색은 돌아오지 않습니다.

 

이는 업데이트를 즉시 해주지 않았기 때문입니다.

 

해결 방법은 간단합니다. State 업데이트 함수를 사용해주시면 됩니다.

 

 

handler

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

input의 onChange를 관리하는 함수에 작성해주었습니다.

 

입력값이 있다면 event.target.value의 길이는 0 이상이 될 것이며 이때 State를 업데이트해주었습니다.

 

위의 코드 예시처럼 사용하면 입력값이 변하면 위의 컴포넌트에 작성한 삼항 연산자의 isvalid의 값이 true일 때 설정한 색깔로 변하게 됩니다.