티스토리 뷰

Frontend/react.js

[React JS] 리액트로 엘리먼트 만들기(JSX, Babel)

blueprint-12 2022. 3. 8. 21:15

들어가기 전에 리액트와 JSX가 궁금하다면 공식 홈페이지를 통해서 이해해보도록 합시다.

한글도 지원해서 읽어보는 게 좋을 거 같네요. 

https://reactjs.org/docs/introducing-jsx.html

 

Introducing JSX – React

A JavaScript library for building user interfaces

reactjs.org

 

이전에 안 쓰이는 방법으로 React.createElement() 를 배웠습니다.

이것을 대체하려는 이유는 개발자들이 JSX라는 좀 더 편리한 도구를 사용하기 위해서 입니다. 

 

about JSX

  • JSX(Syntax extension to JavaScript)란? - JavaScript를 확장한 문법
  • 생긴게 HTML과 비슷해서, JSX로 React 요소를 만드는 것이 개발자 입장에서 편하다.

▶저번 예제를 JSX로 형식으로 작성해보자

<!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>how to create Element by React JS with JSX</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react and reactDOM -->
  <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>
    const root = document.getElementById("root");
    const title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse entered")}>
        Hello I am a title!
      </h3>
    );
    const btn = (
      <botton
        style={{ backgroundColor: "tomato" }}
        onclick={() => console.log("I am clicked!")}
      >
        Click Me!
      </botton>
    );
    const container = React.createElement("div", null, [title, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

const root 아래 코드부터는 JSX형식으로 작성한 코드이다. 이대로 브라우저에 실행을 해보면 

이런 오류가 발생하는데 그 이유는 브라우저가 JSX를 이해하지 못하기 때문이다. 그렇다면 어떻게 하면 될까? 

ref:&amp;amp;amp;nbsp;https://reactjs.org/docs/introducing-jsx.html

위는 JSX를 적용한 모습이고 아래는 우리가 이전에 배웠던 어려운 방법을 통해 react 엘리먼트를 만드는 방법이다. 문제해결을 위해서는 위의 코드를 아래 코드와 같이 변환시켜야 한다.

 

Babel 사용하기

-코드를 변환시켜주는 역할(일종의 코드 변환기)

-JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다. (브라우저는 JSX를 모르기 때문)

JSX는 객체를 표현한다. Babel은 JSX를 React.createElement() 호출로 컴파일한다.

(React의 JSX문법을 브라우저가 이해할 수 있도록 하려면 Babel이 필요)

 

※참고로 Babel이 변형해준 코드가 궁금하다면 F12(검사) -> head 태그의 script태그를 확인해 보세요.

 

1. Babel standalone을 이용하여 다운

  • 주의) 해당 방식은 느립니다. 차후에 더 나은 방식을 배울거지만 바벨을 사용하기 위해서 일회적으로 적용하는 방법입니다. 

▶사용방법

  • 위의 코드 중 회색으로 드래그된 부분을 react & reactDOM 의 CDN 코드아래에 삽입해줍니다.
  • 적용시킬 코드가 있는 script 태그의 type을 "text/babel" 로 수정해줍니다.  
<body>
    <div id="root"></div>
  </body>
  <!-- react and reactDOM -->
  <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>
  <!-- Load 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 entered")}>
        Hello I am a title!
      </h3>
    );
    const Btn = (
      <botton
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("I am clicked!")}
      >
        Click Me!
      </botton>
    );
    const container = React.createElement("div", null, [Title, Btn]);
    ReactDOM.render(container, root);
  </script>

결과물 

 

 

이 부분에서 우리가 또 수정해야 할 부분이 있죠. 

 const container = React.createElement("div", null, [Title, Btn]);
    ReactDOM.render(container, root);

이 부분입니다. 아직도 React.createElement()를 사용하고 있어요. 이 코드에 JSX를 적용해 봅시다.

 

1. 우선 기존의 변수들을 function으로 만들어줍니다. // const Button과 Title를 함수로!

함수로 만드는 방법은 간단합니다. 기존 코드에 "() =>"(Arraow function) 를 추가해주면 됩니다.

e.g.) const Button = () => ( JSX 코드 );

 

+ arrow function으로 만들 때, 왜 중괄호{}가 아니라 소괄호()로 감쌀까? 

  • 소괄호는 return 한다는 것을 전제로 표시하기 때문에 코드가 더 간략해질 수 있다. 
  • 반면, 중괄호는 return을 안한다는 것을 전제로 하기 때문에 return이 필요한 상황에서는 직접 {return ~~ } 으로 작성해주면 된다. 
//아래의 두 예시는 똑같은 기능을하는 함수입니다. 표현방법이 다를 뿐입니다.
//우리는 위의 예시를 사용합니다.
const title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse entered")}>
        Hello I am a title!
      </h3>
    );
    
function title() {
   return (
      <h3 id="title" onMouseEnter={() => console.log("mouse entered")}>
        Hello I am a title!
      </h3>
    );
}

 

 

 

 2. 함수로 변경된 변수를 마치 일반적인 HTML 태그인 것처럼 Container에 포함시켜 렌더링해주기

*물론 이 부분에서도 Container를 함수로 만들어서 컴포넌트로 사용합니다. arrow function을 넣어주는 것을 잊지마세요. 또한, ReactDOM.reader()에 넣을 때에도 container → <Container /> 로 바꿔야 겠죠. 

 

완성된 코드▼

 <body>
    <div id="root"></div>
  </body>
  <!-- react and reactDOM -->
  <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>
  <!-- Load 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 entered")}>
        Hello I am a title!
      </h3>
    );
    const Button = () => (
      <botton
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("I am clicked!")}
      >
        Click Me!
      </botton>
    );
    //JSX로 변환하면서 중요한 점은 변수명의 맨처음을 대문자로 써주는 것
    //컴포넌트의 첫 글자는 반드시 대문자여야만 한다!
    //소문자일 경우 React랑 JSX는 이 엘리먼트가 HTML title, button 태그라고 인식한다.
    //우리가 직접 만든 요소는 전부 대문자로 시작
    const Container = () => (
      <div>
        <Title /> <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>

-> 이렇게 컴포넌트를 다른 컴포넌트에 넣는 방법을 배웠습니다. 예시를 통하면 div id가 root인 컴포넌트에 Container 라는 직접 만든 컴포넌트를 넣은 것이죠. 

 

 

 

※중요) 우리가 만든 컴포넌트는 작명할 때 첫글자를 소문자가 아닌 대문자로 작성해야 합니다.

그래서 위의 코드에서 const Title, Button, Container가 전부 대문자로 시작하죠? 직접 만든 컴포넌트이기 때문입니다.

->우리가 직접 만든 컴포넌트를 렌더링해서 다른 곳에서 사용할 때는 항상 대문자로 시작해야 한다. 

  • 소문자일 경우, React랑 JSX는 이 엘리먼트가 HTML title, button 태그라고 인식한다.
  • 우리가 직접 만든 요소(컴포넌트)는 전부 대문자로 시작
    • *컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 유저가 사용하는 시스템에 대한 조작장치를 이야기 한다. 통상 컨트롤(Control)이라고 하고 UI라고도 한다.

 

 

'Frontend > react.js' 카테고리의 다른 글

[React JS] props 객체  (0) 2022.03.13
[React JS] Input 과 state를 사용해서 unit convertor(단위 변환기)만들기1  (0) 2022.03.11
[React JS] useState 의 state 변경하는 2가지 방법  (0) 2022.03.11
[React JS] State 에 대해서 배우기(React.useState를 사용해서 리렌더링하기)  (0) 2022.03.11
[React JS] 리액트로 엘리먼트 만들기(안 쓰이는 방법)  (0) 2022.03.07
댓글