-
JSX는 자바스크립트의 확장 문법이고, XML과 매우 비슷
JSX 문법
① 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
이렇게 하면 JSX expressions must have one parent element 이런 오류가 뜬다. 그 이유는 무엇일까?
오류를 해석해 보면 "JSX 표현식에는 하나의 상위 요소가 있어야 한다" 라는 뜻이다.
오류에서도 볼 수 있듯이 여러 요소가 있을 땐 부모 요소 하나로 감싸야 한다.
이 코드를 수정해 보자!
다음과 같이 <div>라는 태그로 감싸 주었다.
코드를 수정 하였더니, 오류가 없어지며 다음과 같이 결과가 출력 되었다.
▶ 여러개의 요소를 하나의 요소로 감싸주는 이유는 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하는 규칙이 있기 때문이다.
div요소와 같이 쓸 수 있는 요소로는 Fragmet라는 요소가 있다.
Fragmetn를 사용했을 때 ② 자바스크립트 표현
- 자바스크립트 표현식을 사용하려면 JSX 내부에서 코드를 { }로 감싸면 된다.
③ IF문 대신 조건부 연산자
- JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 { } 안에 조건부 연산자를 사용하면 된다.
- 조건부 연산자는 삼항 연산자라고도 부른다.
10줄을 보면 === 이런 연산자가 나와있다.
이 연산자는 일치 연산자로 좌항과 우항이 정확하게 같을 때 true가 된다.
이 말은 즉, 양쪽이 타입까지 일치 했을 때인 것이다.
1 === "1" false
"1" === "1" true
④ AND 연산자를 사용한 조건부 렌더링
&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
※ falsy 한 값인 0은 예외적으로 화면에 나타난다.
