[리액트] JSX

JSX란?

• HTML과 유사하게 하게 생겼지만 JavaScript 언어의 확장된 문법이다.
• 리액트 프로젝트에서 겉으로 보이는 부분을 정의할 때 사용한다.
• 리액트 프레임워크에서 특화된 개념이다.
• 컴파일에 최적화되어 있다.

Babel이 컴포넌트 파일 안에 있는 XML 형태인 JSX를 Javascript로 변환해준다. JSX 파일은 컴파일이 되기 때문에 변환과정에서 오류가 있을 경우에 빌드할 때 오류가 발생한다.

JSX -----[Babel]----> Javascript

//src/App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

JSX 기본 문법

• 꼭 닫혀야 하는 태그 <div>/div> <input />
• 꼭 감싸져야하는 태그 

2개 이상의 태그는 반드시 전체를 감싸주는 태그가 필요함

<div id = "root">
	<div> Hello </div>
	<div> 안녕 </div>
</div>

스타일 설정이 복잡해지거나 table 관련 태그를 작성할 때는 fragment 사용하면 좋다. 브라우저에서 fragment는 하나의 엘리먼트로 나타나지 않는다.

<>
	<Hello />
	<div> 안녕 </div>
</>

• 중괄호{ }를 통해 Javascript 변수 사용
• 중괄호{ }를 통해 주석 감싸주기
• html과 다른 style 설정; camelCase 네이밍