React를 사용하기 전에 Vanilla JS(바닐라 자바스크립트)와 비교를 해봅시다.
✅ Vanilla JS
<!DOCTYPE html>
<html>
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
위의 HTML 코드는 "Click me"라는 버튼을 클릭하면 "Total clicks"의 숫자가 올라가는 코드입니다.
이러한 프로그램을 만들기 위해서 Javascript를 활용하여
- counter라는 변수를 만들고
- button과 span을 선택한 뒤
- 함수를 만들어 버튼을 클릭할 때 발생하는 이벤트리스너를 설정하여
- counter의 숫자를 하나 늘리고
- span 안의 텍스트에 counter를 다시 넣어줍니다.
✅ React CDN
https://ko.legacy.reactjs.org/docs/cdn-links.html
CDN 링크 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
리액트를 사용하기 위해 npm에 등록된 패키지를 CDN으로 바로 활용 가능한 unpkg를 이용하여
script 태그 안에 넣어줍니다.
✏️ development vs. production
development는 개발용으로 배포용 버전에 적합하지 않고
React의 용량 및 성능 최적화된 배포용 버전은 production 버전입니다.
✅ React
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
✏️ import한 react와 react-dom
import한 react는 interactivity의 원동력이자 react를 사용할 수 있도록 하는 것입니다.
react-dom은 React element를 HTML에 둘 수 있도록 해주는 것입니다.
✏️ React.createElement
element를 만드는 것이며 3개의 인자(argument)가 올 수 있습니다.
ex) React.createElement("html 태그 명", {propertys}, "content")
property는 id, class, style 그리고 event listener까지 지정할 수 있습니다.
content로 선언된 컴포넌트를 불러오기 위해서는 대괄호를 사용하여 불러올 수 있습니다.
✏️ ReactDOM.render
React element를 가지고 HTML로 만들어 배치한다는 것을 의미합니다.
React 18 버전부터는 ReactDOM.createRoot(root).render(container)와 같이 사용합니다.
✅ 바닐라 JS와 React 비교
바닐라 JS에서는 HTML을 먼저 만들고, JavaScript로 가져와서 HTML을 수정하는 방식입니다.
React JS에서는 모든 것이 JavaScript로써 시작해서 그 다음이 HTML이 되는 방식입니다.
✅ JSX
https://ko.legacy.reactjs.org/docs/introducing-jsx.html
JSX 소개 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
React에서는 JSX라는 문법을 사용합니다.
JSX란, JavaScript를 확장한 문법이며 HTML에서 사용한 문법과 흡사한 문법을 통해 React 요소를 만들 수 있게 해줍니다.
✅ Babel
Babel · Babel
The compiler for next generation JavaScript
babeljs.io
Babel이란 JavaScript 컴파일러입니다.
다시 말하자면 JavaScript로 결과물을 만들어주는 컴파일러이며 소스 대 소스 컴파일러(transpiler)라고 불립니다.
🚨 Babel을 사용하는 이유는 JSX로 적은 코드를 브라우저가 JSX라고 이해할 수 있는 형태로 바꿔주어야 하기 때문입니다.
✅ JSX, Babel을 사용해 리팩토링
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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");
function Title() {
return (
<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 Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>JSX에서는 컴포넌트를 함수로 만들어서 리턴해주어야 합니다.
이 때, 컴포넌트의 첫 글자는 반드시 대문자로 해야 하는데 그 이유는 HTML 태그와 혼동이 될 수 있기 때문입니다.
'이론 (Front-end) > React' 카테고리의 다른 글
| [React] select 태그를 통한 컴포넌트 제어 (0) | 2023.07.12 |
|---|---|
| [React] input 값 사용하기 (0) | 2023.06.14 |
| [React] JSX와 HTML 속성 차이 (0) | 2023.06.01 |
| [React] State 사용하기 (0) | 2023.05.16 |
| [React] React.js를 배우는 이유(Vue.js와 비교) (0) | 2023.04.18 |