1. 거대 회사들이 많이 사용한다.
한국 상위 1만 개의 웹 사이트 중에서 44.76%가 사용하고 있다.
개발자는 시간이 제일 중요하다.
어떤 기술을 2달 배워서 6개월을 쓸 수도 있으며, 5년을 쓸 수도 있다.
거대 회사들이 React를 사용하고 있으며 이들이 framework를 바꾸기 위해서는 시간이 없다.
2. React의 많은 활용
react는 자바스크립트를 활용하기 때문에 많은 자원이 존재한다.
리액트 react native와 같이 앱으로도 활용할 수 있고,
심지어 VR 경험을 제작하려고 한다.
3. UI와 상호작용 할 수 있다.
자바스크립트만 사용할 때는 html에 버튼을 생성하고, JS에서 버튼 요소를 찾고 (document.getElementById 혹은 querySelector) 이벤트 함수를 생성하고,
이벤트 핸들러에 등록해야한다.
리액트는 버튼을 생성하는데 무엇이 필요한지 알고 클릭을 감지하는 지름길을 만들었다.
4. React CDN 링크
https://ko.reactjs.org/docs/cdn-links.html
5. valina JS와 비교
<바닐라 자바스크립트>
<!DOCTYPE html>
<html>
<body>
<span>i have been clicked 0</span>
<button id="btn">Click me</button>
</body>
<script>
let count = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
count += 1;
span.innerText = `i have been clicked ${count}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
리엑트 JS엔진과 같다. 상호작용이 강한 UI를 만들 수 있다.
리액트 DOM은 모든 React element들을 HTML body에 둘 수 있게 해준다.
Render: 사용자에게 보여준다
리액트에서 요소 만들기
<바닐라 자바스크립트>
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{ id: "sexy-span" },
"Hello i'm span"
);
ReactDOM.render(span, root);
</script>
</html>
자바스크립트에서는 html에서 요소를 만들어 주고, 그것을 JS로 가져와서 HTML을 수정하는 방식이다.
하지만 React JS에서는 모든 것이 JS로써 시작해 그 다음에 HTML이 된다.
유저에게 보여질 내용을 컨트롤 할 수 있다.
리액트에서 이벤트 핸들링하기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{ onMouseEnter: () => console.log("mouse enter") },
"Hello i'm span"
);
const btn = React.createElement(
"button",
{ onClick: () => console.log("onclick event") },
"click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
6. JSX 사용하기
JSX는 javascript를 확장한 문법이다.
기본적으로 우리가 여기서 한 것처럼 React 요소를 만들 수 있게 해주는데
JSX는 html과 비슷한 문법으로 요소 핸들링을 해준다.
JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주기 위해서는 babel이 필요하다.
JSX로 만든 요소들을 다른 요소에 포함 시키기 위해서는 화살표 함수를 사용해야한다.
const root = document.getElementById("root");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse Enter")}>
Hello i'm span
</h3>
);
// 위의 함수는 아래와 같다
function Title() {
return (
<h3 id="title" onMouseEnter = {()=> console.log("mouse enter")}>
Hello i'm a title
</h3>)
우리가 하려는 건, 이것들을 마치 일반적인 HTML 태그인 것처럼 포함시켜준다.
컴포넌트를 다른 컴포넌트 안에 넣기 위해서는 화살표함수를 이용한다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.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 span
</h3>
);
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("i'm clicked")}
>
click me
</button>
);
const Container = () => (
<div>
<Title /> <Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
