React) 프로젝트 열기 및 코드 이해하기(import 구문, 번들러, 웹팩)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
[리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다.

 

프로젝트 열기

파일 > 열기 > hello-react 디렉터리 > 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 logo from './logo.svg';
import './App.css';

 

import 구문

: 특정 파일을 불러오는 구문

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

(Node.js에서는 imprt가 아닌 require라는 구문을 이용)

이러한 기능을 브라우저에서도 사용하기 위해 *번들러를 사용합니다.

 

* 번들러란?

파일을 묶듯이 사용하는 것으로 *웹팩, Parcel, browserify 도구들이 있음 (React에선 주로 웹팩 사용)

import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성 혹은 여러 개의 파일로 분리

 

* 웹팩

사용 시 SVG 파일과 CSS 파일도 불러 사용 가능

↓

웹팩의 로더(loader)라는 기능이 이를 담당 : create-react-app이 웹팩의 로더를 대신 설치해줌!

① css-loader : CSS 파일을 불러옴

② file-loader : 웹 폰트나 미디어 파일을 불러옴

③ babel-loader : 최신 자바스크립트 문법으로 작성된 코드를 바벨을 이용하여 ES5 문법으로 변환

 

babel-loader (최신 자바스크립트로 작성된 코드 변환 이유) 사용 이유?

구버전 웹 브라우저와 호환하기 위하여 사용

대부분의 최신 웹 브라우저에서는 자체적으로 최신 자바스크립트 문법을 바로 실행할 수 있음

하지만 구버전 웹 브라우저에서는 실행되지 않기 때문에 반드시 변환 작업 필요!

 

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 키워드를 이용하여 App 컴포넌트를 생성한 것을 확인할 수 있는데, 이를 함수 컴포넌트라고 합니다.

return으로 함수에서 반환하고 있는 내용을 나타내는데, 해당 코드를 JSX라고 합니다.