jsx
- React는 jsx(문자도 HTML도 아닌 JavaScript의 확장 문법)을 사용
- javaScript 코드에서 html형식을 그대로 작성할 수 있다.
- XML같은 sysntax를 Babel을 이용하여 native javascript로 변경해준다.
이 표현법을 브라우저에서 자바스크립트처럼 인지하기 위해서 Babel(javaScript Complier(언어 해석기, 특정 언어를 다룬 프로그래밍 언어로 옮기는 프로그램),)이 필요하다.
-즉 jsx라는 표기를 React가 아닌 js도 이해할 수 있는 js로 바꾼다.
jsx와 js
jsx는 js와 함께 혼용되어 쓸 수 있다.
이것을 전문용어로 Interpolation라고 하는데,
한 가지 플로우안에 a라는 타입도 쓰고 b라는 타입도 쓰며 섞어쓴다는 의미이다.
즉 jsx와 js를 섞어쓴다는 것 자체가 js의 장점을 리엑트에서도 사용할 수 있다는 의미이다.
그리고 혼용하여 쓰는것은 이례적인 일이아니다. 이미 html에서 사용하고 있다.
html안에서 js, css에서 사용하듯이 말이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<!-- js가 읽는 script와 babel이 읽는 script가 다르기 때문에 type="text/babel"을 기입을 해줘야한다. -->
<script type="text/babel">
const rootElement = document.getElementById("root");
const Paint = ({ text }) => {
const firstChar = text.charAt(0); // === text[0];
return ({/*js 영역*/}
<>
{firstChar === firstChar.toUpperCase() ? ({/*js 영역*/}
<h1> {/*jsx 영역*/}
{text}{/*js 영역*/}
</h1> {/*jsx 영역*/}
) : ( {/*js 영역*/}
<h3> {/*jsx 영역*/}
{text}{/*js 영역*/}
</h3> {/*jsx 영역*/}
)}
</>
);
};
const element = (
<>
<Paint text="Text" />
<Paint text="text" />
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
예시로 든 코드인데 하나의 플로우에서 js와 jsx를 같이 혼용해서 사용하고 있는 모습이다.
개발자