리액트의 확장자 JSX

• JSX : javascript XML의 약자로 자바 스크립트에 XML 문법을 추가한 확장형 문법이다.
  • 자바 스크립트에 HTML 문법을 사용 할 수 있다.
  • 확장자는 .jsx, .js, .tsx(타입 스크립트와 호환 가능) 가 사용 가능하다.
  • 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 Babel을 사용하여 자바 스크립트 형태의 코드로 변환된다.
  • 문법 규칙
    • 1) 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다.

      • // 잘못된 코드
        function App(){
          return (
            <h1>Hello</h1>
            <h2>Is it working well?</h2>
          )
        }
        
        // 올바른 코드
        function App(){
          return (
            <div>
              <h1>Hello</h1>
              <h2>Is it working well?</h2>
            </div>
          )
        }

    • 2) JSX 내부에서 코드를 { } 로 감싸면 JS 표현식을 사용할 수 있다.

      • import React from 'react';
        
        function App(){
          const name = 'react';
          return(
            <div>
              <h1>Hello! {name}</h1>	// react 라는 값으로 변환됨.
              <h2>Is it working well?</h2>
            </div>
          )
        }
        
        export default App;

    • 3) JSX 내부에서 { } 안에 if 대신 삼항연산자 사용 가능하다.
    • 4) AND 연산자 (&&)를 사용한 조건부 렌더링이 가능하다.
    • 5) undefined 를 렌더링하지 않는다.

      • function App(){
          const name = 'undefined';	// undefined을 렌더링하게 되면 에러를 발생시킨다.
          return name;
        }
        
        function App(){
          const name = 'undefined';	
          return name || '값이 undefined 입니다' ;	// 해당 값이 undefined 일때 사용할 값을 지정함으로써 에러 방지
        }
        
        function App(){
          const name = 'undefined';	
          return <div>{name}</div>;	// JSX 내부에서 undefined를 렌더링 하는 것은 괜찮다
        }

 

• 리액트를 설치하면 생성되는 기본파일 중 App.js는 루트 컴포넌트 이다.
• 여기서 render 함수 안에 HTML 처럼 생긴 코드들이 JSX 코드이다.
• .js로 파일을 생성하면 render() 에서 태그가 자동완성 되지 않는다.
• React 에서는 .jsx로 작성해야 HTML 기능이 자동 완성 된다.
• HTML 문법이지만 이는 HTML 이 아니라 자바스크립트이다.