JSX(Javascript XML)
- JSX는 자바스크립트를 확장한 것으로, 리액트에서 UI를 구성할 때 사용하는 문법이다.
- 표현력이 뛰어나며 선언형 구조를 잘 나타내며, 문법 오류와 코드량을 줄이기 때문에 더 나은 개발자 경험을 제공한다.
- JSX로 작성된 코드는 브라우저가 바로 실행할 수 없기 때문에, Babel과 같은 컴파일러를 사용하여 자바스크립트로 변환해주어야 한다.
JSX 활용
1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.
<Opening tag>
All elements
<Closing tag>
2. 엘리먼트 클래스 사용 시 className으로 표기한다.
- class는 자바스크립트의 class로 해석된다.
3. 자바스크립트 표현식 사용 시 중괄호를 이용한다.
4. 사용자 정의 컴포넌트는 대문자로 시작한다.
- 만약 소문자로 적으면 HTML 엘리먼트로 인식할 것이다.
5. 조건부 렌더링에는 3항 연산자를 사용한다.
- if문은 식이 아니라 문이기 때문에 사용할 수 없다.
6. 여러 개의 엘리먼트를 표시할 때는 map() 함수를 사용한다.