84. 동적 인라인 스타일 설정하기

아무것도 입력하지 않았을 때 발생하는 아래와 같은 현상을 막아보자

이를 위해서는 style을 동적으로 설정해야 한다

 

trim() 이라는 공백제거 메서드를 사용할 건데

inline style props는 값으로 객체를 가진다

<label style={{ color: !isValid ? 'red' : 'black' }}>Course Goal</label>
        <input
          style={{
            borderColor: !isValid ? 'red' : 'black',
            backgroundColor: !isValid ? 'salmon' : 'transparent'
          }}
          type="text" onChange={goalInputChangeHandler} />

이런 방식으로 조건에 맞지 않는 (예: 공백입력) 경우에 스타일을 변화하게 만들었다
하지만 항상 inline style에 최우선을 두기 때문에 css가 일순위가 되기 때문에 다른 style 속성들이 무시될 것이다

 

아래와 같이 setIsValid 값을 변경하고 return 해줌으로써 조건부 스타일링 완성

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

 

CourseInput.js

import React, { useState } from 'react';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    setEnteredValue(event.target.value);
  };

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

  return (
    <form onSubmit={formSubmitHandler}>
      <div className="form-control">
        <label style={{ color: !isValid ? 'red' : 'black' }}>Course Goal</label>
        <input
          style={{
            borderColor: !isValid ? 'red' : 'black',
            backgroundColor: !isValid ? 'salmon' : 'transparent'
          }}
          type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );
};

export default CourseInput;