[react 리액트] 초간단 동적으로 CSS 인라인 스타일 넣는 방법

 

회원가입을 하다보면 내가 양식에 맞는 입력값을 넣기 전까지
INPUT 창이 붉은색으로 나타나는 경우를 종종 봤을 것이다.
이처럼 조건이나 상황에 따라 스타일이 동적으로 변하도록 설정하는 방법을 알아보자.

 

 

 

e.g. State 불리언 타입으로 조건 설정해보자

- isValid가 true, false 일 경우 CSS를 설정할 수 있다.

 

 

state 선언

const [isValid, setIsValid] = useState(true)

 

 

CSS 선언

<div className="form-control">

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

        <input style={{ borderColor: !isValid ? "red" : "black"}} type="text" onChange={goalInputChangeHandler} />

      </div>

- 보면 label 은 isValid가 false 일때 글자색이 red, true일때 black 으로 나오도록 했다.

- 마찬가지로 input 창의 보더 컬러도 isValid가 false 일때 red, true일때 black 으로 나오도록 했다.

 

 

조건 선언

언제 true가 되고 언제 false가 될 지를 상황에 맞게 설정해준다.

 

예를 들면 INPUT 이벤트핸들러에 타겟벨류(즉, 입력값)의 길이가 0 이상이면 setIsValid(true)로 설정을 바꿔 CSS가 변경되도록 한다. 

 

 

 

※ 주의

이렇게 속성에 직접적으로 css를 작성하는 인라인 스타일은
css 설정 중에서 최우선으로 여겨지기 때문에 다른 모든 css 설정을 오버라이드 하기 때문에 주의!