[리액트 복습] 2. React 이해하기

코드 이해하기

지금까지 import 구문을 아무렇지 않게 사용했었습니다.
이는 특정 파일을 불러오는 것인데, react로 만든 프로젝트의 JS 파일에서는 Import를 사용해 다른 파일들을 사용할 수 있습니다.

모듈을 불러와서 사용하는 것은 브라우저에 없는 기능입니다.
브라우저가 아닌 환경에서 JS를 실행할 수 있게 해 주는 Node.js 에서 지원하는 기능입니다.(require)

번들러

이 기능을 브라우저에서도 사용하기 위해 번들러 를 사용합니다. 번들러는 파일을 줄로 묶는다는 의미이죠
웹팩, Parcel 등의 도구가 있습니다.
번들러 도구를 사용하면 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다.

또 최적화 과정에서 여러개의 파일로 분리될 수도 있습니다.

웹팩을 사용하면 SVG, CSS 파일을 불러와서 사용할 수 있습니다.
이렇게 파일을 불러오는 것은 로더 라는 기능이 담당합니다.
css-loader는 css, 구버전 웹 브라우저와 호환하기 위한 babel-loader, file-loader는 파일 등을 불러옵니다.

JSX

JSX 는 JS의 확장 문법입니다. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 JS 형태의 코드로 변환됩니다.

작성된 코드는 다음과 같이 변환됩니다.

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