순수 React를 babel을 통해 JSX문법 사용하기
CRA없이 순수 React로 개발해보고 Babel을 통해 JSX문법을 사용하기
React에서 babel 사용해보기
CRA가 아닌 순수 React에서 JSX 사용하기
React 개발 팀에서 원활한 개발 환경을 제공 하기 위해 ‘cra’를 제공하는데요.
리액트 프로젝트를 시작할 때 항상 creat-react-app을 설치하셨을 겁니다.
cra에서는 많은 기능을 제공하지만 babel(ES6를 ES5로 변환하는 역할을 함)을 통해 JSX문법을 사용합니다.
babel이 없다면?
JSX 문법을 사용하지 못하게됩니다.
자 먼저 babel 없이
순수 React
로만 카운트 버튼으로 숫자를 증가시키는 프로그램을 만들어보겠습니다.
<html>
<script>
JSX 문법을 사용하지않는 React는 참 복잡합니다.
<button> 태그로 버튼을 생성하고 <div>로 그리드를 구성하고 <p>, <h2>등을 활용해 글자 텍스트를 생성하는 방법과는 많이 달라보이네요
직접 React와 ReactDOM을 활용해야하니 여간 번거로운게 아닙니다.
하지만 babel을 활용해 JSX문법을 사용하면 얘기가 달라집니다.
JSX 문법을 활용
어떤가요?
훨씬 더 간결하죠.
하지만 이 상태에서 바로 실행하게되면 SyntaxError를 만나게 될겁니다.
이렇게요..
너무 당연하게도 JSX문법은 Javascript 표준이 아니기 때문에 Browser에서 실행하면 당연히 에러를 만나게됩니다.
에러를 해결하기위해 babel를 이용해서
JSX문법을
creatElement코드로 변환해볼겁니다.
babel 설치
- package.json
npm으로 패키지를 관리할 때는 package.json파일이 필요함
npm init -y
package.json 파일 생성 완료
- babel 설치
npm install @babel/core @babel/cli @babel/preset-react
- @babel/core 는 바벨의 핵심 기능을 가지고 있는 패키지
- @babel/cli는 cli에서 사용할 바이너리가 들어있음
- @babel/preset-react는 리액트를 위한 플러그인 여러개를 모아놓은 것
** babel은 프리셋(여러 플러그인)과 플러그인(하나의 변환하는 기능) 개념
- 기존 파일을 컴파일해서 변환
- npx babel — watch src — out-dir . — presets @babel/preset-react
이 코드는 컴파일 할 때마다 자동으로 변경을 해준다.
다음과 같은 디렉토리 구조에서 src 밑에 있는 simple1.js를 simple1.html 밑에 있는 simple1.js로 컴파일 한 것임.
변환 완료
다음과같이 변환이 된 것을 볼 수 있으며, 에러가 없어지고 잘 실행이 됐죠!?
NPX 에 대해서 잠깐 짚고 넘어가보죠.
- npx babel
.bin 폴더에 있는 babel 바이너리 파일을 실행해주는데, babel이 설치되지 않았다면 설치를 진행해주는 편리 기능이다
메타데이터
- post_id
- d579dbd3aa0a
- slug
- 순수-react를-babel을-통해-jsx문법-사용하기-d579dbd3aa0a
- url
- https://medium.com/@hanxbeen/%EC%88%9C%EC%88%98-react%EB%A5%BC-babel%EC%9D%84-%ED%86%B5%ED%95%B4-jsx%EB%AC%B8%EB%B2%95-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-d579dbd3aa0a
- canonical_url
- https://medium.com/@hanxbeen/%EC%88%9C%EC%88%98-react%EB%A5%BC-babel%EC%9D%84-%ED%86%B5%ED%95%B4-jsx%EB%AC%B8%EB%B2%95-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-d579dbd3aa0a
- author_url
- https://medium.com/@hanxbeen
- status
- ok
- fetched_at
- 2026-07-28 00:11:24
