먼저 React는 무엇일까?
React는 페이스북에서 시작된 UI을 만들기 위한 자바스크립트 라이브러리다.
리액트를 사용하기 위해선 React JS와 React DOM을 import 해줘야한다.
React JS가 element를 생성하고 event listener를 더하는것을 도와주고,
React DOM은 element들을 가져다가 HTML로 바꿔준다.
먼저 바닐라 자바스크립트로 간단한 웹을 만들어보자
<!DOCTYPE html>
<html lang="en">
<body>
<h2>Total click : 0</h2>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const h2 = document.querySelector("h2");
function handleClick() {
console.log("Clicked !! ");
counter = counter + 1;
h2.innerText = `Total click : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
코드의 흐름을 보면 HTML을 먼저 작성해주고, 이 HTML들을 자바스크립트를 통해
동적으로 만들어주는 구조다.
하지만 React JS 는 반대다.
JS가 element를 생성하고 React JS가 그것을 HTML로 번역한다.
즉 React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있다.
이 React JS 를 사용하기 위해서는 JSX와 Babel을 이해해야한다.
JSX는 HTML과 JS를 혼합한 형태의 문법으로, 객체를 표현한다.
Babel은 JSX를 React.createElement() 호출로 컴파일 해준다.
React를 사용하여 만든 간단한 예제를 보자면,
<!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>React</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = document.getElementById("root");
const Span = () => <span> Total click : 0 </span>;
const Btn = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => alert("hello")}
>
{" "}
click me!{" "}
</button>
);
const Container = () => (
<div>
<Span />
<Btn />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
span과 button 을 만들어주었는데, 이것을 만든 문법이 HTML과 비슷하다.
즉 JS에서 HTML과 비슷한 구조로 코드를 짜고 넣은건데 이것이 JSX문법이다.
이 JSX 코드를 Babel이 React에 맞게 컴파일해준뒤 코드가 돌아간다.
종합적으로 이 과정들을 통해 React로 훨씬 더 Interactive한 웹사이트를 제작할 수
있다고 한다. (바로바로 HTML 내용이 업데이트가 가능하기 때문에 그럴 것으로 생각된다.)
