단축 평가 (Short-Circuit Evaluation)

논리곱 &&과 논리합 || 연산자를 이용한 단축 평가가 스스로 헷갈려서 간단하게 정리하는 글입니다.

<div className={`${styles["form-control"]} ${!isValid && styles.invalid}`}>

해당 코드에서 !isValid && styles.invalid의 뜻?

!isValid이면 styles.invalid을 반환해라.

isValid는 기본값이 true로 설정되어있다. 하지만 !isValid (false)상태라면 styles.invalid를 적용해라.

즉, 단축평가를 사용하면 조건부(if문) 역할을 할 수 있을 것 같다.