React가 작동하는 원리
<!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>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter")
},
"Hello I'm a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("i'm clicked"),
},
"Click me"
);
const contaner = React.createElement("div", null, [h3, btn]);
ReactDOM.render(contaner, root); ```React element들을 root div 안에서 보여줘라```
</script>
</html>-
React JS, ReactDOM 코드를 import
- React JS : element 생성, event listener 더하는 것을 도와줌
- React DOM : React element들을 가져다가 HTML로 변환
-
const h3 = React.createElement,
const btn = React.createElement,
const contaner = React.createElement- 첫번째 argument : root에 들어갈 HTML 태그
- 두번째 argument : props가 포함된 object
- 세번째 argument : content
-
바닐라 JS는 element에 각각 event listener를 달아야 함. React는 event listener를 등록하고 계속 사용할 수 있다. onClick(on~) 등의 event가 이미 등록되어 있는 상태
JSX
JSX는 자바스크립트의 확장버전, 객체를 표현한다
- HTML 이랑 문법 구조가 비슷
- 리액트는 JSX문법을 사용, 그러나 브라우저는 JSX문법을 이해하지 못함
- Babel을 사용하면 브라우저가 이해할 수 있도록 JSX 문법을 변환해줌
- 스크립트 태그를 추가하고 리액트를 작성하고 있는 스크립트 태그에 type="text/babel"을 넣어줌
- 방법
- div에 const 넣기 위해선 const를 함수로 만들어 줘야함 const Btn = () => ( ); arrow function 이라고 부름 function과 다르게 return문을 이미 포함하고 있음
- HTML 태그처럼 만들어서 넣어줌
- (중요) 컴포넌트의 첫 글자는 반드시 대문자여야 함 우리가 직접 만든 요소는 전부 대문자로 시작해야 함
<!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");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Contaner = (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Contaner, root);
</script>
</html>
