2장. JSX

1.3의 설치 방법은 여느 블로그에 다 있으니 스킵하겠다.(절대 귀찮아서 아님😜)

2.1 코드 이해하기

vscode에서 파일을 열고 src/App.js 파일을 열어보자

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

대략 이런식으로 코드가 짜여있는것을 볼 수 있는데, 코드를 하나씩 이해해보자

import React from 'react'; //없을수도 있음

위의 코드는 리액트를 불러와 사용할 수 있게해주며 리액트를 만들 때 node_modules라는 디렉터리에 react 모듈이 설치되며, 이 import 구문을 통해 리액트를 불러와 사용할 수 있는것이다.

이렇게 모듈을 불러와 사용하는 것은 브라우저에는 없던 기능이며, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다. Node.js에서는 require라는 구문으로 패키지를 불러올 수 있다.

이런 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용하는데, 번들(bundle)은 묶는다는 뜻이이다.

(인프런 - 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 이미지)

리액트에서는 웹팩을 사용하며, 그 이유는 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다. 번들러 도구를 사용하면 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해주며, 최적화 과정에서 여러 개의 파일로 분리될 수 있다.

2017년부터 브라우저에서 import 구문을 사용할 수 있지만 프로젝트 번들링과는 엄연히 다르다.

import logo from './logo.svg';
import './App.css';

웹팩을 사용하면 SVG, CSS파일도 불러올 수 있는데 이것은 웹팩의 로더(loader)라는 기능이 담당한다. 웹 폰트, 미디어 파일, css 파일을 불러올 수 있게 해주고, babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용해 es5 문법으로 변환해 준다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

이 코드는 function 키워드를 사용해 만들었기때문에 함수형 컴포넌트라고 부르며, 프로젝트에서 컴포넌트를 랜더링하면(= 보여준다) 함수에서 반환하는 내용을 나타낸다. 이 코드는 JSX라고 부르면 된다.

2.2 JSX란?

JSX는 자바스크립트 확장 문법이며 XML과 비슷하게 생겼다. 이런 형식으로 작성한 코드는 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다.

JSX

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

이 코드는 다음과 같이 변환된다.

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

2.3 JSX의 장점

2.3.1 보기 쉽고 익숙하다

자바스크립트와 JSX로 작성한 코드를 보면 JSX가 가독성이 높고 작성하기 쉽다고 느껴지며, 이것은 JSX를 사용하는 주된 이유이다.

2.3.2 더욱 높은 활용도

JSX에서 div나 span 같은 HTML 태그를 사용할 수 있고, 컴포넌트도 JSX 안에서 작성할 수 있다. src/index.js 파일을 보면 App 컴포넌트를 HTML 태그 쓰듯이 작성한것을 볼 수 있다.

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

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