Gom3rye

Who Am I] JSX 소개 본문

웹 개발

Who Am I] JSX 소개

Gom3rye 2022. 8. 31. 17:23

cra 이용해 npx create-react-app {프로젝트명} 로 리액트 시작하기

HTML으로 Hello HTML! 출력하기

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Hello HTML!</h1>
  </body>
</html>

JS로 Hello Javascript! 출력하기

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");  // id가 root인 element 가져와서 rootElement로 선언
      const element = document.createElement("h1");   // h1태그를 통해 새로운 element 생성
      element.textContent = "Hello Javascript!";   // element 속에 textContent를 넣어주기, content는 Hello Javascript!
      
      rootElement.appendChild(element);   // 화면에 element의 내용을 보여주겠다.\
    </script>
  </body>
</html>

React로 Hello React! 출력하기

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>   // react를 가져오기 위한 코드
    
    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");  // id가 root인 element 가져와서 rootElement로 선언
      const element = React.createElement("h1", {
        children: "Hello React!",
      });  // React는 중괄호를 이용해 안쪽에 children을 선언해줄 수 있다.
      
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

비교

- JS에서 createElement 한 후 textContent로 따로 저장해준 것처럼 하지 않아도 React에서는 children을 통해서 "Hello React!"라는 string을 받아줄 수 있다.

- ReactDOM이라는 친구가 render 함수를 통해 element를 rootElement에 넣어서 렌더링 해준다.

JSX로 Hello JSX! 출력하기

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>   // react를 가져오기 위한 코드
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>   // 바벨 스크립트 넣어주기
    
    <div id="root"></div>
    <script type="text/babel">   // type="text/babel"을 넣어주어야 jsx 사용 가능
      const rootElement = document.getElementById("root");  // id가 root인 element 가져와서 rootElement로 선언
      
      const text = "Hello JSX!";
      
      const element = <h1>{text}</h1>
      
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

- JS의 모든 기능을 가지고 있으면서 모든 것을 변수화할 수 있다는 장점을 가지고 있다.

 

728x90
반응형

'웹 개발' 카테고리의 다른 글

Who Am I] Components와 Props / State 다루기  (0) 2022.09.01
Who Am I] Virtual DOM  (0) 2022.08.31
Frontend 세미나 5주차] React Hooks - 2  (0) 2022.08.27
Frontend 세미나 5주차] React Hooks - 1  (0) 2022.08.21
Frontend 세미나 4주차] React Publishing, Router  (0) 2022.08.20
'웹 개발' Related Articles more