JSX

• React에서 UI 컴포넌트를 정의하는데 사용되는 문법
• XML과 유사하게 생겼지만, JS 코드로 변환
• Babel이나 Rollup 같은 도구로 트랜스파일링되어 React.createElement로 변환됨
• Tree 자료구조 : 모든 JSX 표현식은 하나의 루트요소로 감싸야 함

특징

• JSX 내에서 JS 표현식을 사용할 때 중괄호 사용
  • const <h1>Hello, {name}</h1>
• 조건부 렌더링 시에 if문 대신 삼항 연산자나 논리 연산자 사용
  • <h1>Hello, {name}{age && (isMale ? ‘군’ : ‘양’)}</h1>
• HTML 클래스 속성은 className, 스타일 속성은 camel case로 작성
  • <div className=”container” style={{backgroundColor: ‘red’}}></div>
• 모든 JSX 태그는 반드시 닫아야 함
• 주석은 {/ … /}
• injection 공격에 안전함 : JSX는 기본적으로 XSS와 같은 크로스 사이트 스크립팅 공격에 안전
  • 렌더링 전에 모든 값을 이스케이프 처리
• Babel : JSX 코드를 트랜스파일링
• Rollup : 번들러, 트랜스파일된 코드를 묶어 최적화

xml 규약 엄격 준수 필요

• 스스로 닫는 태그 사용이 필수
  • 자식 요소가 없을 때 사용

<input type="text"/>
<img src="some url"/>

JSX 코드는 항상 가상 DOM을 반환해야 함

• React.createElement 코드로 변환이 되어야 함
• 그렇지 않으면 오류 발생

const div = <div>{console.log('hello')}</div> 
// console.log는 가상 DOM을 반환하지 않음 -> error

표현식만 사용 가능

• return 키워드 없이 어떤 값이 반환
• return문 사용하면 오류
• cf.) 실행문
  • if, switch, for문, …