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

이미지 보기

ReactJS CloneCoding SPA ReactJS ReactJSCloneCoding

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

22.03.23 작성

읽는 데 5분

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={% raw %}{{{% endraw %}
      backgroundColor: "tomato",
    {% raw %}}}{% endraw %}
    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={% raw %}{{{% endraw %}
        backgroundColor: "tomato",
      {% raw %}}}{% endraw %}
      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={% raw %} {{ {% endraw %}
        backgroundColor: "tomato",
      {% raw %} }} {% endraw %}
      onClick={() => console.log("I'm clicked")}
      >
      Click me
    </button>
  );
  const Container = () => (
    <div>
      <Title />
      <Button />
    </div>
  );
  ReactDOM.render(<Container />, root);
</script>
</html>

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github