• 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문, …