JSX 파일의 논리 처리

완료됨

JSX는 HTML과 JavaScript의 조합입니다. 특정 항목을 표시하는 방법이나 표시 여부를 결정하는 등의 논리가 필요하다면 JavaScript를 사용하세요. if...else 문, case 문이나 다른 부울 논리를 사용해도 됩니다.

삼항 연산자

애플리케이션에 부울 논리를 삽입하는 가장 일반적인 방법은 삼항 연산자입니다. 삼항 연산자는 한 줄 코드에서 if...else 문을 만드는 약식 방법입니다. 삼항 구문에는 부울 식, 식이 참인 경우의 반환 값, 식이 거짓인 경우의 반환 값이라는 세 가지 구성 요소가 있습니다.

예를 들어 숫자가 짝수 또는 홀수일 때 메시지를 표시하려면 다음을 작성하면 됩니다.

const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');

표현식은 부울 값(number % 2)으로 시작합니다. 숫자가 홀수이면 부울 값(나머지)은 1 또는 true입니다. 첫 번째 값(The number is odd)이 반환됩니다. 숫자가 짝수이면 나머지가 0이므로 부울 값은 false입니다. 두 번째 값(The number is even)이 반환됩니다. 이전 코드는 The number is odd라는 메시지를 생성합니다.

삼항 및 JSX

이 구문을 사용하면 값을 표시하는 방법을 결정할 수 있습니다. 값을 기준으로 HTML 요소의 class를 동적으로 설정하고 싶다면 다음을 사용하세요.

<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>

참고

class가 아닌 className 특성을 사용합니다. class 단어가 JavaScript에서 예약되어 있기 때문입니다. 런타임 혼동을 방지하려면 className을 사용하세요.