C-log

⚛️React Training : React의 간단한 원리 본문

⚛️React/⚡ver.2

⚛️React Training : React의 간단한 원리

4:Bee 2024. 1. 24. 21:58
728x90

프로젝트 수업에 들어가기 앞서 리액트의 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

728x90
저작자표시

'⚛️React > ⚡ver.2' 카테고리의 다른 글

⚛️React Training - section04 : Memo  (0) 2024.02.03
⚛️React Training - section04 : Props와 Components  (0) 2024.02.03
⚛️React Training : Controlled Component&Uncontrolled Component  (0) 2024.02.02
⚛️React Training : useState의 간단한 원리  (1) 2024.01.26
⚛️React Training : 시작하기 앞서  (0) 2024.01.23
'⚛️React/⚡ver.2' Related Articles more
Comments