지토의 개발일기/React

[React] 조건부 연산자 (삼항 연산자)

지아토 2021. 7. 15. 18:41

JSX 내부의 자바 스크립트 표현에서는 if문 사용이 불가능합니다. 

 

조건에 따라서 내용을 렌더링 해야할 경우 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나 , {} 안에 조건부 연산자를 사용하면 됩니다.

 

 

삼항 연산자 사용

 

캡처된 화면과 같이 소스코드를 작성할 경우

 

name 값이 == '리액트' ?  true : false  가 작동 하게 설정이 되어있습니다. 

 

위의 예시의 경우 const name 으로 선언된  name 값이 = 'd' 이므로 false에 해당되며 아래 캡처와 같은 결과문이 출력이 되어야 할 것입니다.

 

  

만약 name 값이 = '리액트' 일 경우 데이터가 일치 하므로 true값을 반환하고 이는. '리액트 입니다'라는 결과로 출력되어 질 것입니다.