<React 파헤치기-09> 컴포넌트 - 1. JSX

JSX  : JavaScriptXML

자바스크립트에 XML을 추가한 확장형 문법

 

XML 또한 HTML의 표현법을 확장한 문법이기 때문에 HTML을 다룰 줄 안다면 JSX도 쉽게 체득할 수 있다.

 

대신 JSX는 HTML이 아니라 마크업 규칙을 따르기 때문에 아래와 같은 차이점이 발생한다.

//HTML
<img src="image1.jpg">

//JSX
<img src="image2.jpg" />

 

- JSX 에서는 element의 시작표시 <와 />의 짝이 맞지 않으면 react 엔진이 jsx를 분석할 때 오류가 발생한다.

 

<JSX의 작동 원리>

1. index.js 파일은 npm run start 혹은 yarn start를 통해 리액트 서버를 구동했을 때 가장 먼저 실행되는 파일이다.

2. index.js는 'root'라는 id를 가진 element에  App component를 출력한다.

 (root라는 id를 가진 element는 index.html에 명시되어있다.)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

 

react 엔진은 아래와 같이 JSX의 XML 구조를 분석하여 JS 함수 코드로 변환한다. 

import React from "react";
class App() extends React.Component{
  render(){
    return (
      <div>
        <div>안녕하세요</div>
      <div/>
    );
  }
}
export default App;

...
    return (
      React.CreateElement(
        "div",
        null,
        React.CreateElement(
          "div",
          null,
          "안녕하세요",          
        )
      )
   );

그러나 react를 사용하면 위 과정을 모두 알 필요가 없다. 개발자는 JSX만 작성하고, react 엔진은 JSX를 기존 Javascript로 해석하는 역할만 하면 된다.

이를 선언형 화면(declaration view)기술이라 부른다. 이를 통해 JSX는 개발자가 화면 구성에만 집중하도록 도와준다.