리액트 코드 이해하기

import React from 'react';
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;

 위와 같은 코드는 리액트 프로젝트를 처음 실행했을 때 src/App.js에서 볼 수 있는 코드다. 나와 같이 리액트를 처음 접하는 사람들은 생소한 코드다. 이제부터 하나씩 이 코드들을 이해해 볼 것이다.

import React from 'react'

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

 

여기서 한가지 알아야할 점은 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에 없던 기능입니다. 바로 Node.js에서 지원하는 기능이며 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있습니다. 이러한 기능을 브라우저에서도 사용하기 위해서 번들러를 사용합니다. 번들은 묶는다는 뜻입니다. 즉, 파일을 묶듯이 연결하는 것이죠.

 

대표적인 번들러는 웹팩, Parcel, browserify라는 도구들이 있고 각 도구마다 특성이 다릅니다. 리액트는 주로 웹팩을 주로 사용하는 추세입니다. 편의성과 확장성이 다른 도구보다 뛰어나기 때문입니다. 번들러 도구를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 하나로 합쳐서 하나의 파일로 생성해줍니다. 또 최적화 과정에서 여러 개의 파일로 분리될 수도 있습니다.

여기서는 src/index.js를 시작으로 필요한 파일을 다 불러와서 번들링하게 됩니다. 2017년도부터는 브라우저에서도 import구문을 사용할 수 있게 되었지만, 이는 단순히 다른 경로에 있는 자바스크립트를 불러오는 용도로만 사용되기 때문에 프로젝트 번들링과는 다릅니다.

 

이렇게 파일들을 불러오는 것은 웹팩의 로더라는 기능이 담당합니다. 로더는 여러 가지 종류가 있습니다. 예를들어 css-loader는 css파일을 불러오게 해주고, file-loader는 웹 폰트나 미디어파일 등을 불러올 수 있습니다. 그리고 bable-loader는 자바스크립트를 불러오면서 최신의 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5문법으로 변환해 줍니다.

 

웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 리액트 프로젝트를 만들 때 사용했던 create-react-app이 번거로운 작업을 모두 대신해주기 때문에 우리는 별도의 설정을 할 필요가 없습니다.

 

다시 처음의 코드를 보게되면 App이라는 컴포넌트를 만들어줍니다. function 키워드를 사용하여 컴포넌트를 만들었지요? 이러한 컴포넌트를 함수형 컴포넌트라고 합니다. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냅니다. 마치 HTML을 작성한것 같지만 이건 HTML이 아닙니다. 그렇다고 문자열 템플릿도 아닙니다. 이런 코드를 JSX라고 부릅니다.

 

 

 

출처: 리액트를 다루는 기술