2-1. 코드 이해하기

src/App.js 파일의 코드를 하나씩 이해해 보자.

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

• import 구문을 사용하여 다른 파일들을 불러와 사용할 수 있다.

• 이렇게 모듈을 불러와서 사용하는 것은 Node.js에서 지원하는 기능이다.

• 이러한 기능을 브라우저에서도 사용하려면 번들러(bundler)를 사용하면 된다.

  • 번들(bundle) : 묶는다는 뜻으로, 파일을 묶듯이 연결
  • ex) 웹팩, Parcel, browserigy 등
  • 리액트 프로젝트에서는 주로 웹팩을 사용한다.

• 번들러 도구를 사용하면 import로 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. 또한, 최적화 과정에서 여러 개의 파일로 분리될 수도 있다.

• 파일을 불러오는 것은 웹펙의 로더(loader)라는 기능이 담당한다.

  • ex) CSS 파일을 불러오는 css-loader, 웹 폰트나 미디어 파일을 불러오는 file-loader, 최신 자바스크립트 문법을 ES5 문법으로 변환해 주는 babel-loader 등
  • 최신 자바스크립트 문법을 ES5(이전 버전의 자바스크립트) 문법으로 변환하는 이유
    • 구버전 웹 브라우저에서는 최신 자바스크립트 문법을 바로 실행할 수 없기 때문이다.
    • JSX 문법도 정식 자바스크립트 문법이 아니므로 ES5 형태로 변환해 줘야 한다.

• 다음 코드는 function 키워드를 사용하여 App이라는 컴포넌트를 만든다.

  • 이러한 컴포넌트를 함수 컴포넌트라고 부른다.

function App() {
	return (
		<div className="App">
			<header calssName="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>
	);
}

• 프로젝트에서 컴포넌트를 렌더링하면(= 보여 주면) 함수에서 반환하고 있는 내용을 나타낸다.
  • 반환하는 내용을 보면 마치 HTML을 작성한 것 같지만, 이 코드는 JSX이다.