jsx와 es6 template literals

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

jsx란 javascript+XML을 합친 자바스크립트의 확장 문법이다. 이는 개발자가 자바스크립트 내에 마크업 코드를 작성할 수 있게 한다.

 

import React from "react";
import ReactDOM from "react-dom";

const name = "Dory";

위의 name을 render로 보이게 하려면 아래와 같이 작성해주면 된다.

ReactDOM.render(<h1>Hello {name}!</h1>, document.getElementById("root"));

 

 

또 다른 예시를 추가해보겠다.

import React from "react";
import ReactDOM from "react-dom";

const name = "Dory";

ReactDOM.render(
  <div>
    <h1>Hello {name}!</h1>
    <p>Your lucky name is {Math.floor(Math.random() * 10)}</p>
  </div>,
  document.getElementById("root")
);

import React from "react";
import ReactDOM from "react-dom";

const fname = "Dory";
const lname = "Kim";

ReactDOM.render(
  <div>
    <h1>Hello {fname + " "+ lname}!</h1>
    <p>Your lucky name is {Math.floor(Math.random() * 10)}</p>
  </div>,
  document.getElementById("root")
);

 

위의 h1 태그 안에 있는 부분이 길어진다면 코드가 지저분해질 것이다. 이때 사용할 수 있는 것이 ES6 template linter이다.

import React from "react";
import ReactDOM from "react-dom";

const fname = "Dory";
const lname = "Kim";

ReactDOM.render(
  <div>
    <h1>{`Hello ${fname} ${lname}!`}</h1>
    <p>Your lucky name is {Math.floor(Math.random() * 10)}</p>
  </div>,
  document.getElementById("root")
);

위와 같이 ``로 감싸주면 되고, 변수는 ${fname}과 같이 표기해주면 된다.