앞에서 jsx 없이 코드를 짜봤는데 너무 귀찮다는 것을 느꼈다
이번엔 babel을 직접 사용해서 jsx문법을 이용해 보겠다.
구축하기
1. jsx로 코드짜기
simple3.html
<html>
<body>
<h2>cra 없이 만든 조아요 페이지</h2>
<!-- react 생성할 때 사용할 돔요소, 여기 안에다가 새로운 돔 생성함 -->
<div id="react-root"></div>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<!-- 여기에 react 코드 작성함 -->
<script src="simple3.js"></script>
</body>
</html>
src 폴더 만들고 그 위에 simple3.js 생성
src/simple3.js
function LikeButton() {
const [liked, setLiked] = React.useState(false);
const text = liked ? "좋아요 취소" : "좋아요";
return React.createElement(
"button",
{ onClick: () => setLiked(!liked) },
text
);
}
function Container() {
const [count, setCount] = React.useState(0);
return (
<div>
<LikeButton />
<div style={{ marginTop: 20 }}>
<span>현재 카운트:</span>
<span>{count}</span>
<button
onClick={() => {
setCount(count + 1);
}}
>
증가
</button>
<button
onClick={() => {
setCount(count - 1);
}}
>
감소
</button>
</div>
</div>
);
}
const domContainer = document.querySelector("#react-root");
ReactDOM.render(React.createElement(Container), domContainer);📌 LikeButton은 createElement로 Container는 jsx로 작성했다
💡 JSX란?
Javascript에 XML을 추가한 확장한 문법이다.
JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
- 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다
위 코드처럼 return() 안에<div></div>로 묶던가<></>,<Fragment></Fragment>로 묶어야 한다. - css 클래스 이름을 부여할 때 javascript의 class키워드와 겹치기 때문에 className을 사용한다
- jsx 안에서 자바스크립트 표현식을 넣고 싶다면 {}을 이용하면 된다
- 스타일을 적용할때 -가 아니라 카멜 케이스를 이용한다
2. 바벨로 컴파일 하기
위 코드를 그냥 실행하면 jsx문법은 자바스크립트 표준이 아니기 때문에 simple3.html을 실행하면 에러가 난다.
따라서 바벨을 이용해서 createElement 함수로 변환해야 한다
패키지 설치
npm install @babel/core @babel/cli @babel/preset-react
변환
npx babel --watch src --out-dir . --presets @babel/preset-react
위 명령어를 이용하면 src 내부의 simple3.js를 전체 폴더에 simple3.js를 createElement 함수로 변환해서 생성해 준다
결과
simple3.js
function LikeButton() {
const [liked, setLiked] = React.useState(false);
const text = liked ? "좋아요 취소" : "좋아요";
return React.createElement("button", {
onClick: () => setLiked(!liked)
}, text);
}
function Container() {
const [count, setCount] = React.useState(0);
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LikeButton, null), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 20
}
}, /*#__PURE__*/React.createElement("span", null, "\uD604\uC7AC \uCE74\uC6B4\uD2B8:"), /*#__PURE__*/React.createElement("span", null, count), /*#__PURE__*/React.createElement("button", {
onClick: () => {
setCount(count + 1);
}
}, "\uC99D\uAC00"), /*#__PURE__*/React.createElement("button", {
onClick: () => {
setCount(count - 1);
}
}, "\uAC10\uC18C")));
}
const domContainer = document.querySelector("#react-root");
ReactDOM.render(React.createElement(Container), domContainer);simple3.html을 실행시켜 보면 아래의 결과가 나온다
