JSX
JSX는 JavaScript를 확장한 문법이다.
기본적으로 HTML에서 사용한 문법과 흡사한 문법을 사용해서 React 요소를 만들 수 있게 해준다. 생긴게 HTML이랑 비슷해서, JSX로 React 요소를 만드는게 개발자들 입장에서는 더 편하다 ^^ 맞는 말이즤..
const Element = <h1 props>Hello, world!</h1>;JSX의 문법은 이렇게 html과 비슷하다.
JSX 사용하기 위한 준비
JSX 문법을 그냥 사용하면 브라우저는 이해를 못 한다. JSX를 쌩 reactJS로 변환해주는 babel standalone의 도움을 받아야 한다.
(참고)
그런데 지금은 배우고 있어서 babel standalone를 가져와서 사용하지만, 이 방식은 느리기 때문에 혼자할 땐 이렇게 할 일 없을 거라고 한다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!--🔥 React 임포트-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--🔥 ReactDOM 임포트-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--🔥🔥 JSX에서 React로 전환해주는 Babel 임포트-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!--🔥🔥 스크립트 타입 "text/babel"로 설정해 주기-->
<script type="text/babel">
//🔥🔥 JSX문법으로 ReactJS 작성하기
</script>
</html>
JSX로 작성하기
특징 및 사용법
JSX는 어플리케이션을 여러 가지 작은 요소로 나누어 관리할 수 있게 해준다. 여러 요소로 잘게 쪼개서 만들고 합쳐 주면 된다.
- ❗️ 컴포넌트의 첫 글자는 반드시 대문자여야 한다! 그래야 JSX가 다른 일반적인 태그랑 구분할 수 있다.
- div 안에 컴포넌트들(타이틀과 버튼)을 넣어주려면 타이틀과 버튼을 함수로 만들어야 한다.
- 그리고 <함수명 /> 이렇게 넣어주면 된다.
<!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");
/* 🔥Old way to create element
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseenter: () => console.log("mouse enter"),
},
"Hi! I'm a title."
);
const btn = React.createElement(
"button",
{
//property에 event listener 등록할 수 있다.
onClick: () => console.log("Click!!"),
},
"Click me"
);
const container = React.createElement("div", null, [title, btn]);
ReactDOM.render(container, root);
*/
//🔥 New way to create element
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hi! I'm a title.
</h3>
);
}
const Btn = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("Click!")}
>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Btn />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>이렇게 작성 후 inspection을 확인해 보면 바디 밑에 있는 스크립트에는 위에서 작성한 JSX 문법이 그대로 스크립트에 출력되고, 이것을 babel이 변환하여 head에 있는 script에서 쌩 reactJS로 한 번 더 출력해 준다.
Always have hope🍀 & constant passion🔥