코딩하는 김딸기
JSX의 사용-리액트 요소를 생성하는 보편적인 방식 본문
리액트 요소를 생성하는 createElement문법을 대체하기=>JSX
JSX – 자바스크립트를 확장한 문법
보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨
const Title = (
console.log("mouse enter")}>
Hello I'm a span
);
style={{ backgroundColor: "tomato" }} -> 스타일은 {} 2개임
JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게
https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야함
-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌
바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함
보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨
const Title = (
console.log("mouse enter")}>
Hello I'm a span
);
style={{ backgroundColor: "tomato" }} -> 스타일은 {} 2개임
JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게
https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야함
-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌
바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함
사전작업
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = document.getElementById("root"); //root가 id인 div요소를 가져와 root라는 요소 생성
/*const h3 = React.createElement(
//h3이라는 이름의 리액트 요소 생성
"h3", //1. 태그: root에 들어갈 html태그
{
id: "title",
onMouseEnter: () => console.log("mouse enter"), //마우스 올리면 문장 출력
}, // 2. 요소 ->id는 title/ 클릭 시 문장 출력
"hello im title" //3. 내용
);
*/
//jsx를 이용해 더 편하게 리액트 요소 생성
//html과 비슷한 형식-태그로 앞뒤닫고 속성은 html태그의 속성처럼 태그내에 추가
const jsxh3 = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
hello im title
</h3>
);
/*const btn = React.createElement(
//btn이라는 이름의 리액트 요소 생성
"button", //1. 태그 이름
{
onClick: () => console.log("clicked"), //이벤트리스너
style: {
backgroundColor: "tomato",
}, //2. 요소: 클릭시 문장 출력(이벤트리스너)/ 배경색을 토마토
},
"click me" //3. 내용
);
*/
const jsxbtn = (
<button //태그 열고닫기
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("clicked")} //속성 포함
>
click me
</button> //내용 입략
);
const container = React.createElement("div", null, [jsxh3, jsxbtn]); // 니가만든 리액트 element들을 특성없이 div 요소로 합쳐 container라는 리액트 요소 만들어
ReactDOM.render(container, root); //니가 만든 리액트 element들을 id가 root인 div안에서 보여줘 =>2개의 요소 렌더링
-실행결과는 같지만 ReactElement보다는 jsx를 사용하는 것이 더 쉽고 간단하게 표현가능하다
