2. JSX

import React from 'react';

이 코드는 리액트를 불러와서 사용할 수 있게 해 줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치됩니다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이죠.

이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능입니다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능입니다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용합니다. 번들(bundle)은 묶는다는 뜻입니다. 즉, 파일을 묶듯이 연결하는 것이죠.

JSX

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.

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

이렇게 작성된 코드는 다음과 같이 변환됩니다.

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

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편하겠지요? JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있습니다.

장점 1 : 보기 쉽고 익숙하다

장점 2 : 더욱 높은 활용도

감싸인 요소

import React from 'react';

function App() {
  return (
    <div> // <Fragment> 또는 <>도 가능
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div> //</Fragment> 또는 </>도 가능
  );
}

export default App;

리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 할까요? 그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

자바스크립트 표현

자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다.

import React from 'react';

function App() {
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}

export default App;

또한 jsx 내부에서는 if문을 사용할 수는 없지만 {}안에 조건부연산자(삼항연산자)를 쓰면 됩니다.

이 조건부연산자와 and, or를 쓰면 다양한 조건을 만들 수 있습니다.

인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있는데요. 이러한 이름은 - 문자를 없애고 카멜 표기법(camelCase)으로 작성해야 합니다. 따라서 background-color는 backgroundColor로 작성합니다.

function App() {
  const name = ‘리액트‘;
  const style = {
    // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
    backgroundColor: ‘black‘,
    color: ‘aqua‘,
    fontSize: ‘48px‘, // font-size -> fontSize
    fontWeight: ‘bold‘, // font-weight -> fontWeight
    padding: 16 // 단위를 생략하면 px로 지정됩니다.
  };
  return <div style={style}>{name} </div>;
}

또한 class가 아닌 className을 사용합니다.

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}

export default App;

ESLint & Prettier

ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구입니다. 해당 도구는 1장에서 설치했으며, 이 절에서는 사용하는 방법을 간략하게 알아보겠습니다. 혹 아직 설치하지 않았다면 VS Code 마켓플레이스에서 ESLint와 Prettier를 설치하세요.

Prettier의 장점은 이러한 스타일을 쉽게 커스터마이징할 수 있다는 것입니다. 현재 열려 있는 프로젝트의 루트 디렉터리(src, public 디렉터리들이 위치한 곳)에서 .prettierrc라는 파일을 생성한 후 다음 내용을 입력해 보세요.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2
}

저장할때마다 자동으로 사용하려면

VS Code 설정은 Code(윈도우의 경우 파일) > 기본 설정 > 설정 메뉴를 클릭하여 열 수 있습니다. 다음으로 상단 텍스트 박스에서 format on save를 검색하여 나타나는 체크 박스에 체크해 주세요. 이제부터는 저장할 때마다 코드가 자동으로 정리될 것입니다.