React) JSX에 대해서 (장점)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
[리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다.

JSX란?

: 자바스크립트의 확장 문법

function App() {
  return (
    <div>
        Hello <b>react</b>
    </div>
  );
}

위와 같은 JSX로 작성된 코드가 번들링되는 과정(파일이 묶여지는 과정)에서 바벨(최신 ES6버전을 ES5버전으로 변환)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

아래와 같이 말이죠.

function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

JSX의 장점

① 보기 쉽고 익숙하다

HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작성하기 쉽습니다.

② 높은 활용도

div, span과 같은 HTML태그 뿐 아니라 컴포넌트도 JSX 안에서 작성할 수 있습니다.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js에서 App 컴포넌트가 만들어졌고, 이를 마치 HTML 태그로 사용하듯 작성된 것을 확인할 수 있습니다.

id가 root인 HTML요소를 찾고(public/index.html) 해당 인스턴스를 createRoot 함수를 사용하여 생성해주었습니다.

root.render 함수에 JSX 코드를 인자로 넣어 보여주고 싶은 컴포넌트를 화면에 보여준 것이죠.

※ React.StrictMode 컴포넌트

- 리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할 때 경고를 주고, 앞으로 미래의 리액트 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 유도하는 개발환경에서만 활성화되는 디버깅용 컴포넌트

※ reportWebVitals

- 웹 성능을 측정하는 도구

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

저작자표시

'JavaScript > React' 카테고리의 다른 글

React) 컴포넌트의 종류, 컴포넌트 생성해보기 (0)	2022.11.01
React) JSX 문법에 대하여 (0)	2022.10.27
React) 프로젝트 열기 및 코드 이해하기(import 구문, 번들러, 웹팩) (0)	2022.10.27
React) Node.js, yarn, Git, VS Code 다운로드 및 프로젝트 생성 (0)	2022.10.26
React) 컴포넌트와 render 함수, 초기렌더링/리렌더링(조화과정) Virtual DOM (0)	2022.10.26

React) JSX에 대해서 (장점)

'JavaScript > React' 카테고리의 다른 글

관련글

티스토리툴바