반응형
JSX란?
JSX는 JavaScript를 확장한 문법으로, HTML에서 사용한 문법과 유사한 문법을 사용하여 React 요소를 만들 수 있게 합니다. 이를 통해 createElement를 대체하여 개발자들이 좀 더 편리하게 사용하도록 도와주기도 합니다.
// JSX
const Title = (
<h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = (
<button
id="button"
style={{backgroundColor: "tomato",}}
onClick={() => console.log("im clicked")}>
Click me
</button>
);// 기존 코드
const Title = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => consol.log("mouse enter"),
},
"Hello I'm a span"
);
const Button = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: "tomato"
},
"Click me");
Babel > Try it out 을 이용하면 JSX를 기존 코드로 변환할 수 있습니다.
Babel 추가하기
React가 JSX를 인식하도록 하려면 Babel을 추가해주어야 합니다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">1. src 추가
2. 스크립트 타입 추가
컴포넌트들을 포함하는 JSX 문법
1. 컴포넌트들을 함수로 만들어주어야 합니다.
1) arrow function
const Button = () => (
<button
id="button"
style={{backgroundColor: "tomato",}}
onClick={() => console.log("im clicked")}>
Click me
</button>
);2) 일반 function
function Title() {
return (
<h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
2. 컴포넌트 렌더링 : 일반적인 HTML 태그인 것처럼 포함시켜줍니다.
// JSX
const Container = (
<div>
<Title />
<Button />
</div>
);
// 위 코드는 아래 코드와 같은 의미를 갖습니다.
const Container = (
<div>
<h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
Hello I'm a title
</h3>
<button
id="button"
style={{backgroundColor: "tomato",}}
onClick={() => console.log("im clicked")}>
Click me
</button>
</div>
);// 기존 코드
const Container = React.createElement("div", null, [Title, Button]);
<Title />, <Button /> 태그를 이용하여 코드가 훨씬 간결해졌습니다. 이때, 컴포넌트의 첫 글자는 반드시 대문자여야 합니다.
2-1. ReactDOM에 렌더링 할 경우
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);컴포넌트를 함수로 만들어주고, render 내부에 HTML 태그 형태로 컴포넌트를 추가해줍니다.
최종 코드
<!DOCTYPE html>
<html lang="en">
<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 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={() => consol.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
const Button = () => (
<button
id="button"
style={{backgroundColor: "tomato",}}
onClick={() => console.log("im clicked")}>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>반응형
'프론트엔드 > React' 카테고리의 다른 글
| [React] 6. Memo (0) | 2022.12.04 |
|---|---|
| [React] 5. Props (0) | 2022.12.04 |
| [React] 4. State (0) | 2022.11.22 |
| [React] 2. Before React (0) | 2022.11.13 |
| [React] 1. React 설치 및 환경세팅 (0) | 2022.11.08 |