React

[React] JSX

sejin2 2024. 3. 21. 10:14

JSX(JavaScript XML)

: 자바스크립트 + XML을 추가한 확장형 문법으로 브라우저에서 실행되기 전 바벨을 통해 자바스크립트 형태로 변환됨

JSX 문법

  1. 반드시 부모 요소 하나로 감싸야 한다. → div 두 개 안됨

2. return 되는 JSX는 하나의 요소로 감싸야 한다.

3. JSX 안에서 자바스크립트 표현식을 쓸 수 있다.

4. return문 안에서 IF문 대신 조건부 연산자 사용
- JSX 내부의 자바스크립트에서 if문을 사용할 수 없다.
( 즉, return문 안에서 대신 { } 안에 조건부 연산자를 사용 ( 삼항 연산자 ) )

5. 속성 name class 대신 className으로 사용

6. 항상 닫는 태그가 있어야 한다.

7. 주석 {/* 주석 */}