JSX란
Javascript 확장문법으로
생긴 모양이 HTML이랑 정말 흡사해서 사용하기 매우 편리하다
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => {
console.log("mouse enter");
},
},
"Hello I`m a span"
);
const btn = React.createElement(
"button",
{
onClick: () => {
console.log("im clicked");
},
style: { backgroundColor: "red" },
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>전 글의 예제를 가져와 JSX로 변환할려면
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I`m a span
</h3>
);이렇게 변환이 가능하다 개발자들은 이방법을 많이 선호하며
계속 사용되는 방법이다
Title이라는 변수안에
h3를 그대로 집어넣은 모양이다
하지만 이렇게 한다고 완성되진 않고 오류가 발생한다
브라우저에 JSX를 이해시켜줘야하기 때문에
여기서 babel을 통해 코드를 변환시켜줘야 한다
변환시키면
const Title = /*#__PURE__*/React.createElement("h3", {
id: "title",
onMouseEnter: () => console.log("mouse enter")
}, "Hello I`m a span");이러한 코드를 볼 수 있는데
직접 변환한걸 적용하진 않고,
추가적으로 babel을 사용할려면
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>라이브러리를 넣어주고,
<script type="text/babel"> // babel로 변환해 읽는다적용시켜줘야 babel로 변환해 사용이 가능하다
즉 모두 변환해 적용시키면
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I`m a span
</h3>
);
}
function Button() {
return (
<button
style={{ backgroundColor: "red" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
}
function Container() {
return (
<div>
<Title />
<Button />
</div>
);
}
ReactDOM.render(<Container />, root);
</script>
</html>
이러한 변환 모습을 볼 수있다
이게 JSX사용법의 기본이며 title과 button은 기존
변수에서 화살표 함수를 사용해도되며, 함수선언식으로 return을 주고 사용하기도 한다
<Title />과<Button />은 컴포넌트로
컨테이너를 통해 전달된다고 보면된다 더욱더 코드 가독성이 올라가며
유지 보수 하기에도 매우 편리하다
Front-end