리액트 스터디
[React] 5. 리액트 스터디 - JSX
더밸류(THEVALUE)
2022. 12. 28. 21:11
[ JSX ]
Javascript 언어에 XML을 추가하여 확장된 문법으로 리액트 프로젝트를 개발할 때 자주 사용되는 문법
Babel이란 도구를 이용하여 일반적인 자바스크립트 형태로 변환된 후 브라우저에서 실행이 됨
일반적인 자바스크립트 문법과 HTML 문법이 혼용되어 사용됨
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
JSX 문법으로 작성된 코드를 일반 자바스크립트 형태로 변환해볼 수도 있으며,
라이브러리 문서를 확인할 수 있는 사이트
리액트 문법을 통해 컴포넌트를 생성하여 화면에 렌더링 하는 방식에서
JSX 문법을 통해 컴포넌트를 생성하는 방식으로 변환해서 사용
두 문법 간의 비교를 위해 아래 샘플 예시를 작성
[ React CreateElement 사용 예시 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 라이브러리 (CDN) -->
<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>
<title>리액트 스터디중</title>
</head>
<body>
<!-- 2. 출력 영역 지정 -->
<div id="display"></div>
<!-- 3. 화면에 출력될 내용 -->
<script >
const root = document.getElementById("display");
const span = React.createElement(
"span",
null,
"hello im span"
);
const btn = React.createElement("button", null, "click me!!");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>
</body>
</html>
[ JSX 사용 예시 ]
JSX 문법을 활용하여 변수 생성 시 변수명의 앞 글자는 반드시 대문자로 설정
소문자로 쓰면 HTML 태그로 인식하므로 대문자로 쓰는 것으로 약속됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 라이브러리 (CDN) -->
<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>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>리액트 스터디중</title>
</head>
<body>
<!-- 2. 출력 영역 지정 -->
<div id="display"></div>
<!-- 3. 화면에 출력될 내용 -->
<script type="text/babel">
const root = document.getElementById("display");
// arrow 함수 사용 + JSX 문법으로 컴포넌트 생성
const Button = () => (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("button clicked!!")}
>
Click Me!!!
</button>
);
// 일반 함수처럼 사용
function Button2() {
return (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("button clicked!! 2")}
>
Click Me!!!
</button>
)
};
const Container = (
<div>
<Button />
<Button2 />
</div>
);
ReactDOM.render(Container, root);
</script>
</body>
</html>