import
특정 파일을 불러오는 구문이며, import를 사용하여 다른 파일들을 불러와 사용할 수 있다.
이런 식으로 모듈을 불러와 사용하는 것은 node.js에서 지원하는 기능이다. 즉, 브라우저에서는 지원하지 않는다. 정확히 말하자면 최신 자바스크립트에서도 import 구문을 지원하지만 해당 기능과는 개념이 조금 다르다. 이런 기능을 브라우저에서도 사용할 수 있게 사람들은 번들러(bundler)를 사용한다.
번들러(bundler)
번들은 묶는다는 뜻으로 즉, 파일을 묶듯이 연결하는 것을 뜻한다.
번들러는 여러 도구들이 있으나 리액트에서는 주로 편의성과 확장성이 다른 도구보다 뛰어난 번들러 도구인 웹팩을 사용하고 있다.
번들러 도구를 사용하면 import로 모듈을 불러왔을 때 모듈끼리 모두 합쳐 하나의 파일로 만들지만 최적화 과정에서 여러 개의 파일로 분리 될 수도 있다.
➕ 웹팩
웹팩을 사용하면 SVG 파일과 SCC파일을 불러오는 것이 가능하다. 파일을 불러오는 역할은 웹팩의 로더(loder)라는 기능이 담당한다.
- loder의 종류
- css-loder : CSS파일을 불러옴
- file-loder : 웹 폰트나 미디어 파일을 불러옴
- babel-loder : 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해줌
loder는 원래 직접 설치하고 설정해야 하지만 create-react-app로 프로젝트 생성시 모두 해주기 때문에 별도의 설정을 할 필요가 없다.
APP 컴포넌트
APP.js에서는 function 키워드를 사용하여 APP이라는 컴포넌트를 생성하고 있다.
이러한 컴포넌트를 함수 컴포넌트라고 한다. 컴포넌트를 렌더링 할 때에는 반환(return)하고 있는 내용을 보여주게 된다. 그렇지만 문법을 자세히 살펴보면 일반적인 스크립트의 문법이 아니라 HTML같이 생겼다. 하지만 HTML이 아니고, 문자열 템플릿도 아닌 JSX이다.
JSX
자바 스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
fucntion APP() {
return (
<div>
Hello <b>react</b>
</div>
);
}위 jsx코드가 다음과 같이 변환된다.
function APP() {
return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));컴포넌트를 렌더링할 때마다 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편하기에 JSX 코드를 사용하여 편하게 UI를 렌더링 할 수 있다.
- JSX 장점
- 가독성이 높다.
- 작성하기 쉽고 익숙하다.
- 활용도가 높다 : HTML 태그를 사용할 수 있을 뿐만 아니라 앞으로 만들 컴포넌트도 JSX안에 작성할 수 있다.
