JSX

*udemy의  Modern React with Redux [2020 Update]를 참고하였습니다.

1.JSX란?

자바스크립트에 HTML 문법을 사용할 수 있게 해주는 JS확장 문법

 

1. 자바스크립트의 특별한 문법이다.

 

2. 브라우저는 JSX를 이해하지 못한다. 그래서 우리는 JSX를 쓰고나서

 

JSX를 보통의 JS로 만들기 위해 tool을 이용한다.

 

3.몇몇 차이가 있지만, HMTL과 매우 비슷한 모양과 기능을 가졌다.

 

const app = () => {
	return <h1>Hello World</h1>
}

====>

"use strict";

var App = function App() {
  return /*#__PURE__*/React.createElement("div", null, "Hello World");
};

 

 

2.JSX VS HTML

 

1.커스텀 스타일링

//nomal JS
<button style="background-color: blue; color:white">Submit</button>

//JSX
<button style={{ backgroundColor: "blue", color: "white" }}>

 

2. 클래스

//normal JS      
<label className="label" for="name">
	Enter name:
</label>
//JSX
<label className="label" for="name">
	Enter name:
</label>

 

3.변수참조

function getButtonText() {
  return "Click on me!";
}

//JSX
 <button style={{ backgroundColor: "blue", color: "white" }}>
      {getButtonText()}
 </button>

 

4.자바스크립트 객체

const button = { text: "Hi there" }

//ERROR!!!!
<button style={{ backgroundColor: "blue", color: "white" }}>
	{button}
</button>

//OK
<button style={{ backgroundColor: "blue", color: "white" }}>
	{button.text}
</button>

JSX는 자바스크립트 객체를 텍스트로 표현할 수 없다. 따라서 구체적으로 명시해주어야 한다.

 

5.속성이름

//CONSOLE ERROR!!
<label className="label" for="name">
 	Enter name:
</label>

//OK
<label className="label" htmlFor="name">
 	Enter name:
</label>