[2장 JSX] 코드 이해하기

import React from 'react';

이 코드는 리액트를 불러와서 사용할수 있게 해준다

리액트 프로젝트를 만들때 node_modules라는 디렉터리도 함께 생성되는데 프로젝트 생성과정에서 이곳에 react모듈이 설치 된다 

import구문을 통해 리액트 모듈을 불러와 사용할수 있는 것이다 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

import

 

 

이렇게 모듈을 불러와 사용하는것은 브라우저에 없던 기능이다 

브라우저가 아닌 환경에서 자바스크립트를 실행 할수 있게 해주는 것이 node.js 다 

node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러 올수 있다 

참고자료 

velog.io/@josworks27/%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EC%9D%84-%EC%9C%84%ED%95%9C-require-%EB%AC%B8%EB%B2%95-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

모듈 사용을 위한 require 문법 간단 정리

medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3

require(), exports, module.exports 공식문서로 이해하기

 

 

이러한 기능 (외부 모듈을 불러오는)을 브라우저에서도 사용하기 위해 번들러(Bundler)를 사용한다 

번들은 묶는 다는 뜻이다. 즉, 파일을 묶듯이 연결 하는것이다 

대표적인 벌들러로 Webpack, Parcel, browserify 라는 도구들이 있다 

편의성과 확장성이 뛰어나 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세다 

번들러 도구를 사용하면 import(또는 require)로 모듈을 불러 왔을때 각 모듈을 합쳐 하나의 파일을 생성해준다 

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

 

이 프로젝트에서는 src/index.js를 시작으로 필요한 파일을 불러와 번들링 하게 된다 

 

2017년부터는 브라우저에서도 import 구문을 사용할수 있게 되었지만, 단순히 다른경로에 있는 자바스크립트를 불러오는 용도로만 사용되기 때문에 프로젝트 번들링과는 다르다 

 

리액트를 불러오는 코드에는 다음과 같이 SVG파일과 CSS파일을 import하는 코드가 있다 

webpack을 사용하면 svg파일과 css파일도 불러와 사용할수 있다 

이렇게 파일들을 불러오는 것은 webpack의 로더 (loader)라는 기능이 담당한다 

로더에는 여러종류가 있다 

ex) css-loader(css파일), file-loader (웹폰트, 미디어파일), babel-loader (자바스크립트 파일을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용해 ES5문법으로 변환해준다)

 

최신 자바스크립트 코드를 왜 변환 하는가?

ES5는 이전 버전의 자바스크립트를 의미한다 

최신 자바스크립트 문법을 ES5 형태로 변환 하는것은 구버전 웹브라우저와 호환 하기 위함이다 

ES5이후 문법들은 ECMAScript 2015(ES6), ECMAScript 2016(ES7), 등과 같은 형태로 이름 지어진다 

 

웹팩의 로더는 원래 직접 설치 하고 설정 해야 한다 

하지만 리액트 프로젝트를 만들때 사용했던 create-react-app이 번거로운 작업을 모두 대신해주기 때문에 우리는 별도의 설정을 할 필요가 없었던 것이다 

이 부분은 App이른 컴포넌트를 만들어 준다 

function키워드를 사용해 컴포넌트를 만들었다 

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

컴포넌트가 랜더링 되며 함수에서 반환 하고 있는 내용을 화면에 출력한다 

함수에서 반환 하는 내용을 보면 마치 HTML코드 같지만 이 코드는 JSX다.

(JSX는 자바스크립트 확장 문법이며 XML과 매우 비슷하게 생겼다)

이어서...