조건부 스타일 설정

• isValid는 setState로 설정한 state 변수이다.
  state 에 따라서 style을 다르게 적용시키려고 할 때
  인라인 방식으로 스타일을 설정하거나 class로 설정할 수 있다.
  
  
• isValid = true 일 때 줄 스타일 invalid 설정

/*form-control과 invalid 클래스가 동시에 있을 때 
.form-control.invalid 내부의 input 스타일
form-control과 invalid 사이에 띄어쓰기가 없음*/

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

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

 

1. 동적인 인라인 스타일 설정

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

 

2. 동적인 CSS 클래스 설정

<div className={`form-control ${!isValid ? 'invalid' : '' }}`>
  <label>Course Goal</label>
  <input type="text" onChange={goalInputChangeHandler}/>
</div>

form-control에 클래스 inValid를 더하거나 빼면서 스타일을 변화시키고 싶을 때 템플릿 리터럴을 사용한다.
템플릿 리터럴은 백틱을 사용하여 플레이스 홀더 ${ } 안에서 표현식을 사용할 수 있으므로 ${ } 안에 조건식을 넣어주어 동적으로 CSS 클래스를 설정한다.

 

const Modal = () => {

  const [zoomed, setZoomed] = useState(true);
  return (  
  	<div
      className={`zoomed-wrapper ${zoomed && "zoomed-wrapper-show"}`}
      onClick={() => setZoomed(false)}
  	>
    <img src={UtilsImg} className="map-img" />
  </div>)
 }

 

 

3. module.css 파일로 설정

파일명을 기존파일명.module.css로 바꾸고 상단에 import styles form './CourseInput.module.css' 로 import

<div className={`${styles['form-control']} ${!isValid && styles.invalid}`}>
  <label>Course Goal</label>
  <input type="text" onChange={goalInputChangeHandler}/>
</div>

위와 같이 사용한다. (객체에 'form-control' 란 key는 점표기법으로 접근할 수 없어서 대괄호 표기법으로 접근함.)