JSX를 이용하여 버튼 클릭 횟수를 알려주는 앱 만들기 (easier way)

📌 JSX

JSX는 Javascript를 확장한 문법이다.

HTML에서 사용한 문법과 흡사한 문법을 사용하여 기본적으로는 React Element를 만들 수 있게 해 준다. (React.createElement() 대체!)

📌 이전 코드와 JSX를 이용한 코드 비교

1. h3생성

이전 코드

const h3 = React.createElement(
  "h3", 
  { 
    onMouseEnter: () => console.log("mouse enter"), 
  }, 
  "Hello, I'm a span."
);

JSX를 이용한 코드

const Title = (
  <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello I'm a title
  </h3>
);

- element를 할당할 변수를 Title이라고 이름지어 주었고, ( ) 안에 생성할 element 관련 코드를 적어준다.

- h3를 생성할 것이므로 h3 tag를 작성하였다.

- content는 h3 tag 사이에 담겼다.

- property(id, onMouseEnter)는 HTML의 속성처럼 적어주었다. onMouseEnter 옆에는 함수를 적어주었는데, 이는 { } 안에 작성해 주었다.

2. button 생성

이전 코드

const btn = React.createElement(
  "button", 
  {
    onClick: () => console.log("im clicked."),
    style: {
      backgroundColor: "tomato",
    },
  }, 
  "Click me"
);

JSX를 이용한 코드

const Button = (
  <button
    style={{
      backgroundColor: "tomato",
    }} 
    onClick={() => console.log("im clicked")}
  >
    Click me
  </button>
);

- style에 관한 코드 또한 { } 안에 적어주었다. 이때 중괄호를 2번 적어주었는데, 첫번째 중괄호는 JS 표현임을 나타내고, 두번째 중괄호는 객체 리터럴(변하지 않는 데이터 그 자체)을 의미한다.

나머지 코드 작성 방식은 h3때와 같다.

📌 Babel 사용하기

But, 위와 같이만 적어준다면 브라우저에서 에러가 발생하는 것을 볼 수 있다.

(Uncaught SyntaxError: Unexpected token '<')

이는 브라우저가 온전히 JSX를 이해하는 것이 아니기 때문에 발생한다.

따라서 우리는 JSX 코드를 이전 시간에 배웠던 좀 더 복잡한 JS 코드(React.createElement()와 같은 것들)로 변환시켜 브라우저가 이해하게 만들기 위해 Babel을 이용할 것이다.

Babel 사용법

<script src="https://unpkg.com/@babel/standalone/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("im clicked")}
    >
      Click me
    </button>
  );
  const container = React.createElement("div", null, [Title, Button]);     // 주목!
  ReactDOM.render(container, root);
</script>

* container에 content로 들어가는 요소의 배열 중 h3와 btn을 각각 Title과 Button으로 수정한다. (변수를 Title로 해 주었기 때문)

- 브라우저의 개발자 도구에서 script를 보면 우리가 Babel에 넘겨준 JSX 코드는 <body> tag 안의 <script> tag 안에, Babel이 브라우저가 읽을 수 있는 형태로 바꾼 코드는 <head> tag 안의 <script> tag 안에 들어 있는 것을 볼 수 있다.

결과적으로 이전 시간의 코드와 동일하게 작동하는 것을 볼 수 있다.

오늘의 코드

<!--버튼을 몇 번 클릭했는지 세는 어플이다.-->
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!--아래 두 줄의 코드는 리액트를 실행시키는 코드이다. 작성하면 console창에 react라고 작성했을 때 결과를 불러올 수 있어야 한다.-->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/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("im clicked")}
      >
        Click me
      </button>
    );
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co