#React JS-2 JSX???

React 2021. 6. 7. 21:56

js에서 react를 사용해서 인자를 생성후 render하면 된다.

 
 const element = React.createElement("h1",null, "Hello, world" );
 //가운데 값을 null로 줄수도 있었고, children, className을 줄 수도 있다.
 
 
 
 //두번째 인자 사용해보기
  const element1 = React.createElement("h1",
  { 
      className: "title"
      children: "Hello, world!!!",
  },
  "Hello, world");
  //화면에서는 chidren 값으로 안나오고 세번째 인자를 주면 세번째 인자로 나온다.
  
  
  
  //children에 배열 주기
  const element3 = React.createElement("h1",
  { 
      className: "title"
      children: ["Hello, world!!!","h1!","bye!"],
  },
  ["Hello, world!!!","h1!","bye!!!!"]);
  //무한히 값을 줄수 있다.

하지만 이렇게 사용할시 불편함이 있다.. 위처린 긴코드를 계속해서 쳐야하기 때문이다.
이런 문제를 해결해줄 수 있는 것이 jsx이다 jsx를 통해 위의 코드를 간단하게 만들어보자.

JSX

-문자도 HTML도 아닌 JavaScript의 확장 문법

- js를 codeSendbox에서 사용하기 위해서는

Babel(javaScript Complier(언어 해석기, 특정 언어를 다룬 프로그래밍 언어로 옮기는 프로그램),)이 필요하다.

-즉 jsx라는 표기를 React가 아닌 js도 이해할 수 있는 js로 바꾼다.

https://babeljs.io/

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

-javaScript 코드에서 html형식을 그대로 작성할 수 있다.

-XML같은 sysntax를 Babel을 이용하여 native javascript로 변경해준다.

React에서 jsx 사용.

JSX	React.createElement 표현식
Babel	JavaScript Complier
JSX 다루기	spread 연산자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <!-- dom - 논리적 모델 VANILLA JS -> 순수 JS -->

    <!-- js가 읽는 script와 babel이 읽는 script가 다르기 때문에 type="text/babel"을 기입을 해줘야한다. -->
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      //HTML의 모양을 JS로 가져온거기때문에 편함.
      const text = "hello , world";
      const titleClassName = "title123";

      const props = { className: titleClassName, children: text };
      const customH1 = <h1 {...props} />;
      //=== const customH1 = <h1 className={props.className}  children={props.children}/>;
      const element = customH1;
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

ReactDOM.render(우리가 렌더링할 JSX형태의 코드, 컴포넌트를 렌더링할 element)