JSX란?

JSX 란?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.

이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서

바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 된다.

 

 

function App() {


  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

 

이렇게 작성된 코드는 다음과 같이 변환 된다.

 

function App() {
  return 
   React.createElement("div", null, "Hello", React.createElement("b" , null ,"react"));
  
}

 

컴포넌트를 랜더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 React.createElement 함수를 사용하면

매우 불편하다

 

그래서 JSX를 사용하면 매우 편하게 UI를 랜더링 할 수 있다.

 

 

※랜더링 : 사용자 화면에 뷰를 보여 주는 것

 

위와 같이

HTML 코드를 작성하는 것과 비슷하기 때문에 JSX를 사용하는 편이 가독성이 높고 작성하기 쉽다.

 

 

---

 

JSX는 HTML 태그를 사용 할 뿐 아니라 컴포넌트도 JSX 안에서 작성 할 수 있다.

 

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

ReactDOM.render =

 

컴포넌트를 페이지에 렌더링하는 역할을 하며 , react-dom 모듈을 불러와 사용 할 수 있다.

이 함수의 첫번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고

두 번째 파라미터에는 해당 JSX를 렌더링할 docuement 내부 요소를 설정한다.

 

여기서는 id가 root인 요소 안에 렌더링을 하도록 설정!