반응형
1. 개요
JSX는 자바스크립트를 확장한 문법이다. JSX를 사용하지 않는 리액트 문법은 HTML과 매우 흡사하다. 그래서 JSX를 사용하면 개발자 입장에서는 매우 편하게 리액트를 개발할 수 있다.
2. 코드비교
JSX를 사용하지 않은 코드와 사용한 코드를 비교해보자.
// JSX 적용 전
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const title = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a title");
const btn = React.createElement(
"button",
{
onClick: () => console.log("I'm clicked"),
style:{
backgroundColor : "tomato",
}
},
"Click me"
);
const container = React.createElement("div", null, [title, btn]);
ReactDOM.render(container, root);
</script>
</html>// JSX 적용 후
<!DOCTYPE html>
<html lang="en">
<head></head>
<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");
const Title = (
<h3
id="title"
onMouseEnter={
() => console.log("mouse enter")
}>
Hello I'm a title
</h3>
);
const Btn = (
<button
style={
{backgroundColor : "tomato"}
}
onClick={
() => console.log("I'm clicked")
}>
Click me
</button>
);
const Container = React.createElement("div", null, [title, btn]);
ReactDOM.render(Container, Root);
</script>
</html>코드를 비교해보면 알 수 있듯, JSX를 사용하면, 자바스크립트 언어에서 HTML 태그를 작성하듯이 페이지를 만들 수 있다. 이렇게 되면 개발자들은 HTML 만들듯이 자바스크립트의 기능도 구현할 수 있는 것이다.
여기서 주의할 점은 자신이 만든 컴포넌트는 무조건 대문자로 시작해야한다.
3. babel
위 JSX 적용 코드를 자세히 보면 babel이라는 단어가 보일 것이다. 이는 JSX 문법을 변환헤주는 변환기이다. JSX 문법은 기본적으로 브라우저에서 인식할 수 없다. 만약 babel을 적용하지 않고 페이지를 브라우저에 로드하면
Uncaught Syntax Error: Unexpected toeken '<'에러가 뜰 것이다. 이는 위에서 언급했듯, 브라우저가 JSX 문법을 이해하지 못해서 나타나는 에러이므로, babel을 적용해주면 에러 없이 정상적으로 동작한다.
4. 다음 포스팅에서는...
다음 포스팅에서는 JSX 적용 코드 중
const container = React.createElement("div", null, [title, btn]);이렇게 다른 HTML 태그를 불러오는 코드를 어떻게 JSX로 변경할 것인지 포스팅하겠다.
(ps. 역시 난 백엔드가 맞는 것 같다...)
지식출처) 노마드코더님 - 'ReactJS로 영화 웹 서비스 만들기' 강의
반응형
'웹 개발 공부 : Front-end > React' 카테고리의 다른 글
| [React] props - 2 (feat. defaultProps, child) (6) | 2024.11.07 |
|---|---|
| [React] props - 1 (0) | 2024.11.07 |
| [React] npm / npx 사용 관련 에러 해결 (npx.ps1 파일을 로드할 수 없습니다.) (0) | 2024.11.05 |
