[React] 리액트에서 사용하는 JSX

2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축

2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정

---

간단한 JSX 사용해보기

 JSX (JavaScript XML)는 자바스크립트에 XML을 추가 확장한 문법입니다.

HTML에서 XML로 다시 JS + XML이 바로 JSX입니다. 참 간단하죠?

 

상기한 테스트앱 생성 글을 기반으로 JSX 사용해보겠습니다.

먼저 App.js 파일을 열고 하기와 같이 수정합니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
      	// 이 부분 끝을 주목하세요! 
        <img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <div>구글 사랑합니다!</div>
      </div>
    );
  }
}

export default App;

 

 render() 함수 부분을 보면 HTML 태그들이 사용되어 있는데 딱히 다른 부분이 없지만

img태그 끝부분을 보면 XML에서 사용하는 / (슬래시)가 사용되어 있습니다. 이게바로 JSX!

하지만 JS문법이 전혀 없기 때문에 이번에는 JS도 섞어서 사용해보겠습니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";

class App extends Component {
  render() {
    const imgSrc =
      "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
    const divText = "구글 사랑합니다!";
    return (
      <div>
        <img src={imgSrc} />
        <div>진짜 {divText} 정말</div>
      </div>
    );
  }
}

export default App;

 

 간단하게 JS변수 선언후에 XML태그와 같이 섞어서 사용했습니다.

리액트의 render() 함수는 JSX를 HTML로 변환해서 화면에 뿌려줍니다.

만약 JSX를 사용하지 않는다면 아래와 같이 코드가 될 것입니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";

class App extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      React.createElement("img", {
        src:
          "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
      }),
      React.createElement("div", null, "구글 사랑합니다!")
    );
  }
}

export default App;

 

 참 불편하죠?

---

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자