1. JSX가 없다면..?
기본적으로 바닐라 JS는 HTML, CSS, JavaScript가 모두 분리되어 있다.
물론 HTML파일에서 한번에 적을 수 있지만 그렇다면 파일이 너무 길어 가독성이 매우 떨어질 것이다.
이때 React문법을 활용하면 HTML에는 JS에서 작성한 내용들을 입력할 하나의 div만 생성해주면 된다.
React를 조금 더 간결하게 만들어주는 JSX문법이 없다면 아래와 같이 React를 통해 요소를 생성하고 만들어서 접근해야한다. 자바스크립트와 매우 유사하지만 요소, 속성, 내용을 한 문장으로 쓸 수 있으며 on이벤트 속성을 활용해 이벤트 발생시 해야할 동작들을 알 수 있다.
하지만 아직까지는 바닐라 자바스크립트와 비교했을 때 장점이 있는지 잘 모르겠다. 그래서 나온 것이 JSX문법이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React</title>
</head>
<body>
<div id="root"></div>
</body>
<!--React JS는 어플리케이션이 interative하게 만들어주는 라이브러리-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React DOM은 모든 React element들을 HTML body에 둘 수 있도록 해주는 라이브러리 또는 패키지-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root")
const span = React.createElement(
"span",
{id: "hoho-span", style: {color: "red"}},
"Hello, I'm a span");
const btn = React.createElement(
"button",
onClick={ () => console.log("I'm clicked")},
"Click me"
const container = React.createElement("div", null, [span, btn])
<!--render란 React element를 가지고 HTML로 만들어 배치, 사용자에게 보여줌-->
<!--span을 root안에 render해줘-->
ReactDOM.render(container, root);
</script>
</html>2. JSX의 사용
JSX를 활용하면 HTML에서 사용하는 마크업 언어를 사용하기 때문에 어떤 내용의 코드인지 한 눈에 들어온다.
아직 CRA를 사용하지 않아 코드가 많이 길어보이지만 CRA를 들어가기 전에 React는 어떤 방식으로 동작하는지 살펴볼 필요가 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React</title>
</head>
<body>
<div id="root"></div>
</body>
<!--React JS는 어플리케이션이 interative하게 만들어주는 라이브러리-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React DOM은 모든 React element들을 HTML body에 둘 수 있도록 해주는 라이브러리 또는 패키지-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--JSX는 자바스크립트 문법이 아니기 때문에 babel을 통해 번역을 해주어야한다.-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
const root = document.getElementById("root")
const Title =
<span id="hoho-span", style: {color: "red"}>
Hello world
</span>
const Btn =
<button onClick={ () => console.log("I'm clicked")}>
Click me
</button>
const container = React.createElement("div", null, [Title, Btn])
<!--render란 React element를 가지고 HTML로 만들어 배치, 사용자에게 보여줌-->
<!--span을 root안에 render해줘-->
ReactDOM.render(container, root);
</script>
</html>3. Element Rendering
우리는 하나의 HTML파일에 그것도 하나의 div를 사용하고 나머지는 자바스크립트로 작업을 할 것이다.
아래에는 그 하나의 div가 있다.
<div id="root"></div>이것을 통해 모든 요소들을 React DOM에서 관리할 것이기 때문에 root라고 부른다.
React 요소를 렌더링 하기 위해서는 DOM엘리먼트를 ReactDOM.createRoot()에게 전달 후 React 요소들을 root.render()에 전달해야 한다.
const root = ReactDOM.createRoot(
document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);위의 작업을 거치면 화면에 "Hello, world"가 보인다.
이와 같은 작업을 위해 어플리케이션을 동적으로 만들어주는 React라이브러리와 렌더링 작업을 도와주는 ReactDOM라이브러리를 import한 것은 위에서 한번 더 참고하자.
4. React의 특징
React는 interactive한 애플리케이션을 만들기 위해 고안된 라이브러리이다. 아무래도 화면상에서 변경되고 새로 그려주어야 하는 부분이 많을 것이다. 하지만 매번 변경이 될 때마다 전체 화면을 새로 그려주게 되면 효율이 떨어지기 때문에 React는 이전의 엘리먼트와 비교하여 변경된 부분만 DOM을 업데이트한다는 특징을 가지고 있다.
🌱 이제 겁은 잔뜩 먹었으니 JSX와 CRA에 감사하며 편안해지기🌱
