JSX에서의 삼항 연산자

이미 알고 계시듯이, 중괄호 안에서는 JavaScript 코드를 실행할 수 있습니다. 사실 이 코드는 어떤 것이든 될 수 있는 것은 아니고 가장 단순한 것만 가능합니다.

특히, 조건문 if는 사용할 수 없습니다. 대신 약식 조건문을 사용해야 합니다.

상수 show의 값에 따라 다른 텍스트를 출력해 봅시다. 이를 위해 삼항 연산자를 사용하겠습니다:

function App() {
	const show = true;
	
	return <div>
		{show ? 'text1' : 'text2'}
	</div>;
}

텍스트뿐만 아니라 태그와도 작업할 수 있습니다:

function App() {
	const show = true;
	
	return <div>
		{show ? <p>text1</p> : <p>text2</p>}
	</div>;
}

다음 코드가 주어졌습니다:

function App() {
	const age = 19;
	
	return <div>
		
	</div>;
}

age에 18세보다 많은 값이 기록되어 있다면, div 태그의 텍스트에서 사용자에게 하나의 텍스트가 있는 단락을 보여주고, 적다면 다른 텍스트가 있는 단락을 보여주세요.