(1) 지금 바로 React 시작하기 - JSX

1. 수강이유

• 위니브 엠버서더가 되어 무료로 강의를 제공 받고 후기를 작성한다.
• 프론트 개발의 갈증을 느껴 수강했다.
• React 기초 강의이다. https://www.inflearn.com/course/%EC%A7%80%EA%B8%88%EB%B0%94%EB%A1%9C-react/dashboard

 

2. 수강내용

• 다른 React 강의에 비해 앞도 적으로 짧은 시간에 React 필수 개념을 다룬다,
• 미니 프로젝트을 작성하여 React의 필요성을 보여주고 > 기초개념 > 프로젝트 만들어보기로 진행된다. 
• 짧은 시간에 많은 내용이 압축되서 강의에 등장한 기초 개념들을 정리해 본다. 

 

3. JSX 사용 이유와 문법 

JSX란 JS를 확장한 문법이다.  

JS로만 React 코드를 작성할 수 있다. 그러나 가독성이 좋지 못해 실무 생산성이 나오지 못한다. 

JS

const element = React.createElement(
  "nav",
  { id: "main-nav" },
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      React.createElement(
        "a",
        { href: "/" },
        "Home"
      )
    ),
    React.createElement(
      "li",
      null,
      React.createElement(
        "a",
        { href: "/archives" },
        "Archives"
      )
    )
  )
);

JSX

// In JSX:
const element = (
  <nav id="main-nav">
    <ul>
      <li>
        <a href="/">
          Home
        </a>
      </li>
      <li>
        <a href="/archives">
          Archives
        </a>
      </li>
    </ul>
  </nav>
);

 

컴파일 JSX → JS

• 브라우저는 JS만 이해한다.
• Babel 같은 tool로 build 과정에서 JSX → JS로 컴파일 필요하다. 
  • JSX → React Element로 변환과정을 거친다.

JSX의 과거 유산

• React에서 JSX 작성할때 .jsx 확장자를 더이상 사용 안해도 된다. .js 확장자에 JSX 문법을 사용해도 되는 것으로 업데이트 되었다.
• JSX 문법에 React 라이브러리를 사용 안하는 것 처럼 보여도 변환하면서 쓴다. 따라서 과거에는 항상 import React from 'react'; 해야했다 
• React 17 부터는 JSX transformer가 도입 import React 안해도 자동 삽입 지원됨
• 따라서 React를 import 안해도 되지만, Hook 과 같은 많은 기능 사용을 위해서 필요할때마다 import를 하곤한다.

Expression Slots

• JSX 문법에서 { } 를 하고 내부에 JS 문법을 적으면 JS 동작한다. 원리가 뭘까?
• { }를 하면 React에서 Elements를 만들때 해당 코드를 손대지 않고 그대로 forward한다.
  • 따라서 JS code 그대로 전달 되어 JS로 동작되는 원리
• 단 { }에는 Expression만 전달할 수 있다. Statements는 불가
  • 타입 변수 = Expression ← statements

import React from 'react';
import { createRoot } from 'react-dom/client';

const shoppingList = ['apple', 'banana', 'carrot'];

// This code...
const element = (
  <div>
    Items left to purchase: {shoppingList.length}
  </div>
);

// ...is equivalent to this code:
const compiledElement = React.createElement(
  'div',
  {},
  'Items left to purchase: ',
  shoppingList.length
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element); 

• JSX에 주석을 달때도 { }를 이용한다.
  • {/* Some comment! */}
  • {// Some comment!}
• Attribute expression slot
  • 속성에도 { } 으로 값을 넣을 수 있다.
  • 동적인 expression을 넣을 수 있다. ex) <main id={userEmail.replace('@', '-')}>

  const uniqueId = 'content-wrapper';
  
  const element = (
    <main id={uniqueId}>
      Hello World
    </main>
  );
  

  • 단 코드를 실행할때만 표현식 동작함 (런타임 동작)

JSX와 HTML 차이

• JSX는 생긴 것은 비슷하지만 HTML과 근본적으로 다르다. 어떻게 다를까?
• HTML 예약어를 JSX에서 사용할 수 없다.
  • class → className
  • for → htmlFor
  • self-closing (ex. <img />)
  • tag는 모두 소문자
  • tag 안 속성은 camel case
    • 단, data, aria 속성은 dash 사용이 유효하다.
  • inline style를 사용할때는 중첩 중괄호 {{}}

JSX에서 공백 사용법

• JSX 사용할때 아래 문법에 “ ” 띄어쓰기가 되지 않는 문제가 있다.
• JSX가 compile 할때 html를 js로 만들기 때문에 발생

import { createRoot } from 'react-dom/client';

const daysUntilSantaReturns = 123;

const element = (
  <div>
    <strong>
      Days until Santa returns:
    </strong>
    {daysUntilSantaReturns}
  </div>
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

• 해결법
  • expression slot를 사용해 공백을 넣는다.
  • intdent를 사용하는 것 보다 아래처럼 명시적으로 선언하는 것이 좋다.
    • prettier를 사용하면 아래와 같은 공백을 자동 생성해줌

<div>
  <strong>Days until Santa returns:</strong>
  {' '}
  {daysUntilSantaReturns}
</div>