실습 - React / JSX

document

document로 노드를 생성하면, 요소 노드만 생성하므로 각각 만들고 자식으로 추가한 후 리턴을 해야하므로 복잡하다.

<div id="root"></div>

<script type="text/javascript">
      // <h1>Hello HTML</h1>
      function App() {
        const h1 = document.createElement("h1");
        const txt = document.createTextNode("Hello DOM");
        h1.appendChild(txt);
        return h1;
      }
      document.getElementById("root").appendChild(App());
</script>

react

react에서 실행한다면 아래의 링크를 head에 추가한 후 시작한다.

document가 아닌 react를 삳용하면 요소 노드만 생성하는 것이 아니라, 그 노드가 가져야 할 속성, 자식 노드 등을 모두 포함한다.

따라서 더 간단하게 코드를 작성할 수 있다.

• ReactDOM.createRoot(...).render(...) - 애플리케이션의 "루트"를 설정한다. render 메서드를 호출하여 이 "루트" 요소에 React 컴포넌트를 렌더링한다.

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

<script type="text/javascript">
      // <h1>Hello HTML</h1>
      function App() {
        // document: 요소 노드만 생성
        return React.createElement("h1", null, "Hello React"); // React: 요소 노드와 그 노드가 가져야할 속성, 자식 노드 등을 포함할 수 있음 -> 간단함
      }
      ReactDOM.createRoot(document.getElementById("root")).render(
        React.createElement(App, null); // 앱 노드를 만든 후, root를 만들어 그 안에서 렌더링 시킴
      );
</script>

JSX

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>를 head에 넣어 바벨로 동작하게 한다.

JSX를 리턴을 할 때 자바스크립트로 변환해주는 코드이다.
왜냐하면 리턴된 값을 받아올 때 JSX인지 JS인지 모르기 때문이다.

• 위의 react, 지금의 jsx는 둘 다 리액트를 사용하는 것이다.
• JSX는 리액트에서 쓰려고 만든 것이긴 하지만 리액트에서만 쓰이는 부분 집합이 아니다.
• react 따로 JSX 따로이다. 하지만 편하니까 JSX 쓰자

ex)
 return <h1>Hello JSX</h1> ➡️ return React.createElement("h1", null, "Hello React");

<div id="root"></div>

<script type="text/babel">
      // <h1>Hello HTML</h1>
      function App() {
        return <h1>Hello JSX</h1>;
      }
      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>