코드

import React from 'react';

 리액트를 불러와서 사용할 수 있게 만들어 준다. 리액트 프로젝트를 만들 때에는 node_modules라는 디렉토리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치 된다. import를 통해 리액트를 불러오게 된다.

모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이며 이는 Node.js에서 지원하는 기능이다. Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러온다.
이러한 기능을 브라우저에서 사용하기 위해서 번들러를 사용한다. 번들러는 파일을 연결해 준다. 주로 사용하는 번들러는 WebPack이다. 번들러 도구를 사용하면 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. 최적화 과정에서 여러개의 파일로 분리 될 수 도 있다.

최근에는 브라우저에서도import 기능을 지원하지만, 단순하게 다른 경로에 있는 js를 불러오는 용도이기에 번들링과는 다르다.

 

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

웹팩을 통해서 SVG 파일과 CSS파일도 불러와서 사용할 수 있게 되며, 이는 웹팩에 있는 loader라는 기능이 담당한다. 로더에도 여러가지 종류가 있으며, file-lodaer는 웹폰트나 미디어 파일등을 불러올 수 있게 해주고, css-loader는 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;

App이라는 컴포넌트를 만들어준다. function이라는 키워드를 사용하여 컴포넌트를 만들었기에 함수형 컴포넌트라고 한다.

프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타낸다.

위와 같은 코드를 JSX라고 한다.