Orchemi

Orchemi

I start where others stop.

[ReactJS] React로 영화 서비스 만들기 : 2.2. JSX의 사용

작성:    

업데이트:

카테고리:

태그: , ,

JSX의 작성

여러 props와 content를 가진 button element를 React 문법으로 만들어보자.


React JS 문법

const btn = React.createElement("button", {
      onClick: () => console.log("I'm clicked"),
      style: {
        backgroundColor: "tomato",
      },
    }, 
    "Click me"
  );
  • Vanilla JS에 비하면 이 역시 훨씬 함축되고 쉽다.
  • 하지만 직관적이지는 않다.


JSX 문법

const Button = (
  <button
    style={{
      backgroundColor: "tomato",
    }}
    onClick={() => console.log("I'm clicked")}
    >
    Click me
  </button>
);
  • JSX는 React를 보다 HTML에 가깝게 작성할 수 있게 해준다.


BABEL : JSX의 변환

  • JSX 문법 자체로는 브라우저가 이해하지 못하기 때문에 BABEL 사이트(링크) 사용


JSX 코드

const Title = (
    <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello, I'm a title
    </h3>
  );
  const Button = (
    <button
      style={{
        backgroundColor: "tomato",
      }}
      onClick={() => console.log("I'm clicked")}
      >
      Click me
    </button>
  );
  ReactDOM.render(Title, root);

Title과 Button 컴포넌트로 구성된 JSX 코드이다.


BABEL 변환 결과

"use strict";

const Title = /*#__PURE__*/React.createElement("h3", {
  id: "title",
  onMouseEnter: () => console.log("mouse enter")
}, "Hello, I'm a title");
const Button = /*#__PURE__*/React.createElement("button", {
  style: {
    backgroundColor: "tomato"
  },
  onClick: () => console.log("I'm clicked")
}, "Click me");
ReactDOM.render(Title, root);

JSX 문법으로 작성한 코드가 React 코드처럼 변환


BABEL 사용 : BABEL standalone

  • CDN을 script 태그로 넣어주는 것처럼 BABEL도 넣어줄 수 있다.
  • 아래의 script 태그와 babel standalone CDN 링크를 html 파일에 붙여넣어준다.
<script src="https://unpkg.com/@babel/standalone@7.17.8/babel.min.js"></script>

느리기 때문에 앞으로 이 방법을 더 사용하지는 않을 것


script type=”text/babel”

다음과 같이 JSX script의 type을 지정해준다.

<script type="text/babel"> ⭐
  const root = document.getElementById("root");
  const Title = (
    <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello, I'm a title
    </h3>
  );
  const Button = (
    <button
  .
  .
  .
</script>
  • script tag의 type에 text/babel을 입력
  • 단순 script가 아니라 type이 babel로 변환되어야 하는 text임을 의미


createElement 대체

JSX 문법으로 Component를 만들어보자.


const container = React.createElement("div", null, [Title, Button]);

지금까지 React 문법을 이용해 만든 방식


element 상수의 함수화

기존 element 상수

const Button = (
  <button
    .
    .
    .
    .
);


함수화 코드 : arrow function

const Button = () => (
  <button
    .
    .
    .
    .
);
  • arrow function을 이용
  • arrow function은 return을 포함
  • 실제 JS의 함수의 정석적인 정의로 표현하면 아래와 같다.


함수화 코드 : 정석

function Button() {
  return (
  <button
    .
    .
    .
  );
}


Component의 삽입

  • JSX 문법에 따라서 삽입해 rendering 해보자.


const Container = (
  <div>
    <Title />
    <Button />
  </div>
);
ReactDOM.render(Container, root);
  • Component의 첫 글자는 반드시 대문자로 작성
  • 소문자로 작성하면 단순 HTML 태그라고 인식
  • <const /> 의 방식으로 뒤에 end slash를 넣은 꺽쇠로 component 함수를 삽입
  • render는 반드시 해주어야 한다.


전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.17.8/babel.min.js"></script>
<script type="text/babel">
  const root = document.getElementById("root");
  const Title = () => (
    <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello, I'm a title
    </h3>
  );
  const Button = () => (
    <button
      style= {{ 
        backgroundColor: "tomato",
       }} 
      onClick={() => console.log("I'm clicked")}
      >
      Click me
    </button>
  );
  const Container = () => (
    <div>
      <Title />
      <Button />
    </div>
  );
  ReactDOM.render(<Container />, root);
</script>
</html>

댓글남기기

참고