8. 조건부 렌더링

목차

1. 논리 연산자 && 사용
2. 삼항연산자 사용

 

 

조건식 작성

1. 한가지 조건만을 사용한 표현식 : 논리 연산자 && 사용

• 조건이 true일 경우 && 뒤의 expression이 출력
• 조건이 false일 경우 React는 && 뒤에 표현식을 무시하고 건너뜀
• 조건이 falsy일 경우, && 뒤에 있는 표현식을 건너뛰지만 falsy 표현식이 return 됨

 

1-1. 문법

condition && expression

 

 

 

 

2. 두가지 조건을 사용한 표현식 : 삼항연산자 사용

• 특수문자를 기준으로 끊어서 해석 가능
• condition이 true이면(?) true를 return하고 아니면(:) false를 return

 

2-1. 문법

condition ? true : false