1. What and Why is React?
React JS : interactive한 UI을 만들어주는 엔진
React Dom : React elements를 HTML로 옮겨줌
React : 온전히 javascript에서 시작!(HTML에서 미리 element를 만든후 다시 찾아올 필요가 없음!) element를 Javascript에서 React로 전부 만들고 HTML에 업데이트
2. JSX
JSX: React 요소를 쉽게 만들기위한 Javascript extention 문법, HTML이랑 문법이 거의 같음!
- React elements는 함수로 만들어준다.
- HTML 태그 안에서 property와 함께 eventListener를 등록할 수 있다.
- onClick = {() => ~~ } 과 같이 작성하면 된다.
(실제 동작 과정)
- JSX 문법으로 작성된 코드를 babel이 리액트문법으로 다시 작성해서 브라우저에 넘겨준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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=""></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 onMouseEnter={()=>console.log("I'm a h3!")}>
Hello I'm a title.
</h3>
);
const Button = (
<button
style={{backgroundColor: "red",
}}
onClick={()=>console.log("I'm clicked!")}
>
Click Me.
</button>
);
/* const button = React.createElement("button",
{
onClick: () => console.log("I'm clicked!"),
},
"Hello I'm a button."
);
const h3 = React.createElement("h3",
{
onMouseEnter: () => console.log("I'm a h3!"),
},
"Hello I'm a h3."
);*/
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>@babel/standalone · Babel (babeljs.io)
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
JSX 소개 – React
A JavaScript library for building user interfaces
ko.reactjs.org
3. arrow function
- 함수를 쉽게 작성하는 Javascript 문법
// not by arrow fucntion
fuction Container() {
return (
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}
// by arrow function
const Container = () => (
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);'React' 카테고리의 다른 글
| [React] 1. Create React App (0) | 2022.01.26 |
|---|---|
| [리액트] 정리 5 (0) | 2022.01.24 |
| [리엑트] 정리 4 (0) | 2022.01.24 |
| [리액트] 정리 3 (0) | 2022.01.23 |
| [리액트] 정리 2 (0) | 2022.01.23 |