CRA없이 React사용해보기 - babel

React 앱을 만들기 위해 필수적인 개발 도구들

• Babel, Webpack, HMR(hot-module-replacemnet)...

하지만 CRA 의 경우 이런 패키지가 포함되어 있습니다.

1 babel 실행에 필요한 react와 react-dom 세팅

babel공식문서

• babel의 경우 JSX파일을 JS파일로 트랜스파일링을 해줍니다.

1-1 리액트 개발환경 세팅(react, react-dom설치)

$ npm init
$ npm i react react-dom

1-2 폴더 및 파일 생성

아래와 같은 디렉티브 구조를 만들어줍니다.

index.html

  <div id="root"></div>

JSX문법으로 작성된 아래의 코드를 JS로 수정해볼 예정입니다.

FollowBtutton.js

import React from 'react'
// React Component!
// Follow <-> following
function FollowButton() {
  const [following, setFollowing] = React.useState(false)

  const commonBtnStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    top: "12px",
    right: "16px",
    width: "100px",
    height: "36px",
    borderRadius: "9999px",
    fontWeight: "bold"
  }

  const followBtnStyle = {
    ...commonBtnStyle,
    backgroundColor: "black",
    color: "white"
  }

  const followingBtnStyle = {
    ...commonBtnStyle,
    backgroundColor: "white",
    color: "black",
    border: "1px solid #cfd9de"
  }

  //JS로 작성된 문법입니다.
  // return React.createElement(
  //   "div", 
  //   {
  //     onClick: () => setFollowing(!following),
  //     style: following ? followingBtnStyle : followBtnStyle
  //   },
  //   following ? "following" : "Follow"
  // )

  //JSX문법
  return <div onClick = {
    () => setFollowing(!following)
  }
  style = {
    following ? followingBtnStyle : followBtnStyle
  } > 
  {following ? "following":"Follow"}
  </div>;
}

export default FollowButton

이제 렌더코드를 추가해보도록 하겠습니다.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import FollowButton from './components/FollowButton'

const domContainer = document.querySelector('#root');
ReactDOM.render(<FollowButton/> , domContainer);

=> 수정

import React from 'react'
import {createRoot}  from 'react-dom/client';

import FollowButton from './components/FollowButton';

const container = document.querySelector("#root");
const root = createRoot(container)
root.render(<FollowButton />)

2 babel을 위한 패키지 다운로드

$ npm i -D @babel/core @babel/cli @babel/preset-react @babel/preset-env

• @babel/preset-react : 리액트에 관련된 코드를 컴파일
• @babel/core : 바벨을 사용하기 위해 필수적으로 필요한 패키지.

3 babel을 이용한 JSX => JS 컴파일

$  npx babel src/components/FollowButton.js --presets=@babel/preset-react 

$  npx babel src/index.js --presets=@babel/preset-react @babel/preset-env"

하지만 preset을 돌릴 때마다 이렇게 옵션을 길게 주는 것은 굉장히 번거롭기 떄문에, 바벨에 관련된 환경설정을 babel.config.js라는 파일을 별도로 만들어 바벨을 돌릴 때 어떤 환경설정을 적용할 것인지를 명시 한 후 cli명령어로는 npx babel로 사용하는 것이 일반적입니다.

configure babel에서 더 자세한 내용을 확인할 수 있습니다.

4. babel.config.js

babel 공식문서의 config babel에서 json형식과 js형식을 확인할 수 있습니다.

babel.config.js

module.exports = function (api) {
  api.cache(true);

  //돌릴 presets의 리스트를 배열안에 적어줍니다.
  const presets = ["@babel/preset-env", "@babel/preset-react" ];
  //포함시킬 플러그인의 리스트를 배열안에 적어줍니다.
  const plugins = [ ];

  return {
    presets,
    plugins
  };
}

$ npx babel src/components/FollowButton.js

• @babel/preset-react : 화살표함수 => 일반함수