프로젝트 수업에 들어가기 앞서 리액트의 jsx문법을 사용하지 않고 unpkg 사이트의 React npm에 등록된 CDN과 순수 js만을 이용해서 span 이 어떻게 생성되고 render되는지 한번 살펴보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root")
const span = React.createElement(
"span",
{ id: "my span", style: { color: "tomato", fontSize: "30px" } },
"Im New!"
);
ReactDOM.render(span, root)
</script>
</html>
우선 HTML에서 div를 생성함과 동시에 div의 id 프로퍼티를 제공해야한다. 해당 id가 제공되면 getElement로 id를 불러와서 React에서 제공되는 createElement를 이용해서 각 프로퍼티들을 생성하게 된다. 여기서 깊게 들어가 React의 createElement를 이용하려면 DOM과 children(childNode)이라는 개념을 알아야한다. 즉, DOM트리에 우리가 접근하기 위해서 사용했던 document로 각 자식 노드에 접근 할 수 있는 것이다. (headr와 body는 html의 childNode이다.) 그래서 Jsx 문법으로 작성을 할 때 return문에 부모 태그가 없을 때 오류가 나는 이유이다. 아래 코드는 기존 js로만 코드를 작성했을 때이다.
const myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.className = "container";
myDiv.textContent = "Im New div!";
document.body.appendChild(myDiv);
조금만 더 나아가서 Jsx 문법은 js를 확장시킨 문법이다. Jsx는 브라우저가 바로 이해 할 수 없기 때문에 Babel과 같은 트렌스 파일을 이용해서 일반적인 js로 변환해 줘야한다. Jsx를 이용하려면 우리가 babel CDN을 연결해야한다. 이를 연결해서 컴포넌트를 생성하고 랜더링 하는 코드를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = document.getElementById("root")
const Title = (
<h3 id="title" onMouseEnter={() => console.log("Mouse enter!")}> Hello</h3>
);
const Button = (
<button id="button" onClick={() => { console.log('Button Click!') }}>
ClickME!
</button>
);
const container = React.createElement('div', null, [Button, Title]);
ReactDOM.render(Button, root);
</script>
</html>
babel CDN을 적용하고 script의 type을 text/babel로 설정하고 Jsx문법을 작성해야 브라우저에서 js를 이해하고 html랜더링하게 된다.
이렇게 우리는 DOM을 더 잘 이해해야하고 그것들을 인지한 상태에서 React의 Jsx 문법을 사용하면 훨씬 도움이 많이 될 것이다.
* Reference