바벨(bable)은 자ㅏㅂ스크립트 코드를 변환해 주는 컴파일러 입니다.
바벨을 사용하면 최신 자바스크립트 문법을 지원힞 않는 환경에서도 최신 문법을 사용할 수 있습니다.
ES6가 막 나왔을 때는 대부분의 브라우저가 ES5가 지원하고 있었기 때문에 ES6문법을 사용할 수 없었습니다.
그때 바벨(ekdtl dlfmadms 6to5)이 ES6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 주었습니다.
ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도 높아졌습니다.
바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있습니다.
이를테면 코드에서 주석을 제거하거나, 코드를 압축하는 용도로 사용될 수 있습니다.
리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용했습니다.
바벨이 JSX문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해 줍니다.
우리는 지금까지 외부 패키지 없이 리액트 웹사이트를 만들었습니다.
여기서는 최초으ㅟ 외부 패키지로 바벨을 추가해 보려합니다.
현재까지의 코드는 너무나 단순하므로 그전에 몇가지 컴포넌트를 추가해 보겠습니다.
화면에 count 상태값을 보여주고 증가, 감소 버튼을 통해서 count상태값을 변경하는 코드를 작성했습니다.
<html>
<body>
<h2>안녕하세요, 이 프로젝트가 마음에 드시면 좋아요 버튼을 눌러 주세요.</h2>
<div id= "react-root">
<script src ="react.development.js"></script>
<script src ="react-dom.development.js"></script>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src = "simple3.js"></script>
</div>
</body>
</html>function fn_LikeButton() {
const [liked, setLiked] = React.useState(false);
const text = liked ? '좋아요 취소' : '좋아요';
return React.createElement(
'button',
{ onClick: () => setLiked(!liked) },
text,
);
}
function fn_Container(){
const [count,setCount] = React.useState(0);
return React.createElement(
'div',
null,
React.createElement(fn_LikeButton),
React.createElement(
'div',
{sytyle : {marginTop:20}},
React.createElement('span',null,'현재 카운트 : ' ),
React.createElement('span', null, count),
React.createElement(
'button',
{onClick : () => setCount(count+1)},
'증가',
),
React.createElement(
'button',
{onClick : () => setCount(count-1)},
'감소',
),
),
);
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(React.createElement(fn_Container), domContainer);단순한 기능인데도 UI 코드가 복잡합닏. 바벨의 도움을 받아서 이 부분을 개선해 보도록 하겠습니다.
기존에 좋아요 버튼이 있던 코드가 container로 변경되었습니다. 그 대신 좋아요버튼은 컨테이너 내부에서 사용되고 있습니다.
JSX 문법 사용해 보기
컴테이너 컴포넌트 코드는 JSX 문법을 사용하면 가독성이 좋아집니다.
코드의 jsx 문법을 사용한 버전으로 작성해 보겠습니다. 기존의 코드에서 컨테이너 부분만 수정했습니다.
function fn_Container() {
const [count, setCount] = React.useState(0);
return (
<div>
<fn_LikeButton/>
<div style={{
marginTop: 20
}}>
<span>현재 카운트:
</span>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>증가</button>
<button onClick={() => setCount(count - 1)}>감소</button>
</div>
</div>
);
}JSX문법 알아보기
JSX는 HTML 에서 태그를 사용하는 방식과 유사합니다. createElement 함수를 사용해서 작성하는 것보다는 JSX문법을 사용하는게 간결하고 가독성도 좋다. HTML 태그와의 가장 큰 차이는 속성값을 작성하는 방법에 있습니다.
그러나 JSX 문법은 자바스크립트 표준이 아니기 때문에 저 js파일을 그대로 실행하면 에러가 발생합니다.
바벨을 이용해서 jsx 문법으로 작성된 simple4.js 파일을 createElement 함수로 작성된 파일로 변환해야 합니다.
바벨 설치하는법
첫번째 현재 저장되어있는 파일모습입니다.
part1에
이렇게 예제들이 저장되어있습니다.
npm을 이용해서 bookreactjs에 package.json을 추가해줍니다.
해당 기능은
Node.js와 NPM설치
앞으로 자바스크립트 라이브러리인 React.js 를 이용해 프론트엔드를 개발한다. React.js를 사용하려면 Node.js라는 자바스크립트 런타임 환경을 이용해야한다. 설치를 해줍시다 https://nodejs.org/ko/downlo
uno-kim.tistory.com
를 꼭 참고하시어 설치해주시면 되겠습니다.
이후 설치를 완료하고
npm install @bable/core
npm install @bable/cli
npm install @bable/preset-react를 이용해서 저장해줍니다.
바벨프러그인과 프리셋
바벨프러그인과 프리셋
바벨은 자바스크립트 파일을 입력으로 받아서 또 다른 자바스크립트 파일을 출력으로 줍니다. 이렇게 자바스크립트 파일을 변환해 주는 작업은 프러그인 단위로 이루어 집니다.
두 번의 변환이 필요하다면 두개의 프러그인을 사용합니다.
하나의 목적을 위해 여러 개의 플러그인이 필요할 수 있는데, 이러한 프로그인의 집합을 프리셋이라고 합니다.
예를 들어 바벨에서는 자바스크립트 코드를 압축하는 프러그인을 모아놓은
babel-minify 프로셋을 제공합니다. @babel/preset-react 는 리액트 애플리케이션을 만들 때 필요한 플러그인을 모아 놓은 프리셋입니다.
설치된 패키지를 이용해서 자바스크립트 파일을 변환해 보도록 해보겠습니다.
위치는 part1 폴더로 지정해준다음
src안에 있는 simple4.js 파일을 변환해주기위해
npx babel --watch src --pit-dir
npx --prestes @babel/preset-react설명을 덧 붙이면 npx 명령어는 외부 패키지에 포함된 실행 파일을 실행할 때 사용합니다.
외부 패키지 실행파일은
./node_modules/.bin/ 밑에서 저장됩니다.
따라서 npx babel 은 ./node_modules/.bin/babel 을 입력하는 것과 비슷합니다.
오래된 npm버전에서는 npx명령어가 동작하지 않습니다.
최신버전의 npm을 설치하거나 ./node_modules/.bin/babel 을 입력하시면됩니다.
위 명령어를 실행하면 src 폴더에 있는 모든 자바스크립트 파일을 @babel/preset-react 프리셋을 이용해서 변환 후
현재 폴더에 같은 이름의 자바스크립트 파일을 생성합니다.
watch 모드로 실행했기 때문에 src 폴더의 자바스크립트파일을 수정할 때마다 자동으로 변환 후 저장합니다.
바벨로 변환 후 simple4.html을 실행해보면
simple3.html 과 같은 결과 화면을 볼 수 있습니다.
'리액트 공부' 카테고리의 다른 글
| CSS 작성 방법 "결정"하기 (0) | 2022.01.22 |
|---|---|
| AUTOPREFIXER (0) | 2022.01.21 |
| Create-react-app으로 시작하기 (0) | 2022.01.20 |
| 웹팩의 기본 개념 이해하기 (0) | 2022.01.19 |
| 리액트 개발 환경 직접 구축하기 (0) | 2022.01.19 |
댓글