JSX 소개

https://ko.reactjs.org/docs/introducing-jsx.html 를 읽고 정리한 글입니다.

 

• JSX : JavaScript를 확장한 문법
  • HTML보다 JavaScript에 가깝기 때문에 camelCase 표기법 사용
• JavaScript 코드 안에서 UI 관련 작업 시 시각적으로 도움이 되며, 에러 및 경고 메시지에 효율적
• JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식 포함 가능
• 컴파일이 끝나면, JSX 표현식은 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다
• JSX 태그는 자식 포함 가능
• JSX에 사용자 입력을 삽입하는 것은 안전
  • React DOM은 JSX에 삽입된 모든 값을 랜더링하기 전에 이스케이프하므로 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다
  • 모든 항목은 렌더링되기 전에 문자열로 변환
  • 이 덕분에 XSS (cross-site-scripting) 공격 방지 가능
• JSX는 객체를 표현
  • Babel은 JSX를 React.createElement() 호출로 컴파일
  • React.createElement()은 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며 React 엘리먼트 생성
  • React는 이 React 엘리먼트 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용

    // JSX
    const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );
    
    // React.createElement()
    const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );
    
    // React.createElement()이 생성한 React 엘리먼트
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world!'
      }
    };