[React JS] JSX 알아보기
span태그와 button을 모두 올리고 싶다면 div태그를 사용해서 같이 만들 수도 있다.
<!DOCTYPE html>
<html lang="en">
<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>
const root = document.getElementById("root");
// const span = React.createElement("span");
// id가 first-span인 span element 생성
const span = React.createElement(
"span",
{id:"first-span", style : {color: "red"}},
"It's a span"
);
const btn = React.createElement("button", null, "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>
</html>
그리고 id와 style 같은 property를 넣는 곳에 함수, 이벤트리스너를 추가할 수도 있다.
react 에서 이벤트리스너를 등록하는 방법은 조금 다르다.
vanilla js에서는 click, react js에서는 on이 붙는다.
이렇게 해야 react에게 우리가 event listener을 등록한다고 알려줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>
const root = document.getElementById("root");
// const span = React.createElement("span");
// id가 first-span인 span element 생성
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"It's a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
react는 interactivity를 위해서 제작된 것이다!~!~!
addeventlistener를 반복하는 것 대신 property object에 event를 등록할 수 있게 되었다.
복습
react js와 reactdom 코드를 import를 했다.
react js는 element를 생성하고 event listener를 더하는 것을 도와주기 때문에 꼭 필요하다.
즉 react js가 interactive power를 가지고 있는 것이다.
react-dom은 react element를 가져다가 html로 바꾸기 위해서 필요하다.
먼저 body에 비어있는 div를 생성했다. react-dom이 react element를 갖다놓을 곳이다.
react-dom은 container element를 root div 안에 render한다.
script에서는 root div를 가져온 후에 reactdom.render했다. - react element를 div에 보여주라는 뜻
이제는 element를 생성하는 방식을 더 쉽게 바꿔볼 것이다.
createElement를 대체할 수 있는 방법을 알아보았다.
편리하게 해주는 친구는 JSX 이다.
JSX
- JavaScript를 확장한 문법
- React를 만들 수 있게 해주는데 HTML 문법과 흡사한 문법으로 만들 수 있다.
- HTML과 비슷하다는 것이 개발자 입장에서 큰 장점이다.
https://reactjs.org/docs/introducing-jsx.html
Introducing JSX – React
A JavaScript library for building user interfaces
reactjs.org
JSX 코드를 사용하면 이 코드에서
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"It's a span"
);이렇게 바꿀 수 있다.
const Title = <h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>
Hello I'm a title
</h3>
이걸 하다가 Uncaught SyntaxError: Unexpected token '<' 이런 에러가 났다.
jsx error Uncaught SyntaxError: Unexpected token '<' 를 구글링해봤다.
https://www.daleseo.com/react-jsx/
[React] JSX와 Babel
Engineering Blog by Dale Seo
www.daleseo.com
error가 나는 이유는 브라우저가 온전히 JSX를 이해하는 것은 아니기 때문이다.
브라우저가 JSX를 이해할 수 있도록 뭔가를 설치해줘야 한다.
Babel은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 코드를 변환시켜주는 얘이다
https://babeljs.io/docs/en/babel-standalone
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
결론은 이렇게 text/babel을 추가해준다.
진짜로 개발할 때는 이 방법은 쓰지 않는다.
<!DOCTYPE html>
<html lang="en">
<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");
const Title = (
<h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = <button
style={
{backgroundColor: "skyblue"}
}
onClick={() => console.log("im clicked")}>
Click me
</button>
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>이렇게 잘 동작한다.
1번을 JSX 표현으로 바꾸려면 2번처럼 쓰면된다.
그런데 저건 Title Button 텍스트 자체이므로 조금 수정이 필요하다.
const container = React.createElement("div", null, [Title, Button]); //1const Container = <div>Title Button</div>; //2
이렇게 Title과 Button을 함수로 만들어줘야 한다.
<!DOCTYPE html>
<html lang="en">
<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 Title = () => (
<h3 id="title"
onMouseEnter={()=> console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button
style={
{backgroundColor: "skyblue"}
}
onClick={() => console.log("im clicked")}>
Click me
</button>
);
const Container = <div>Title Button</div>;
ReactDOM.render(Container, root);
</script>
</html>
여기서 => 는 arrow funtion인데 아래 코드랑 동작은 똑같다
아래코드에서는 return을 넣어주어야 한다.
function Title(){
return(
<h3 id="title"
onMouseEnter={()=> console.log("mouse enter")}>
Hello I'm a title
</h3>
)
}
마지막으로 Container 부분을 이렇게 바꿔준다.
이렇게 여러 컴포넌트들이 합쳐진 구성을 만들었다.
* 기억해야할 것은 컴포넌트의 첫글자는 꼭 대문자여야한다. 소문자라면 React 랑 JSX는 이게 HTML의 title과 button이라고 알아들을 것이다.
const Container = (
<div>
<Title/>
<Button/>
</div>
);
마지막으로 Container까지 컴포넌트로 만들어주었다.
<!DOCTYPE html>
<html lang="en">
<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 Title = () => (
<h3 id="title"
onMouseEnter={()=> console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button
style={
{backgroundColor: "skyblue"}
}
onClick={() => console.log("im clicked")}>
Click me
</button>
);
const Container = ()=>(
<div>
<Title/>
<Button/>
</div>
);
ReactDOM.render(<Container/>, root);
</script>
</html>