JSX

Geonil Jang·2020년 6월 2일

Babel

Babel이란 무엇인가

요즘 Frontend 개발에선 Babel은 필수적입니다. 우선 Babel을 왜 쓰는지 이해하기 위해선 트랜스파일(Tranpile)에 대하여 이해하실 필요가 있습니다.

Babel 설치

npm i -D babel-loader
npm i -D @babel/core
npm i -D @babel/preset-env @babel/preset-react

Webpack config 설정

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

Babel config 설정

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-react',
  ],
};

JSX 이해

JSX 소개

JSX는 React를 위해 나왔습니다만 사실 JSX는 React와 상관없이 사용할 수 있습니다. JSX는 Declarative Programming을 도와줍니다. 쉽게 얘기하면 한눈에 이해하기 쉬운 코드를 만들어 줍니다. JSX는 그 형태가 마치 HTML과 유사합니다. 결국 유저에게 보여주고 싶은 최종적인 UI를 쉽게 파악할 수 있습니다.

아래 코드를 babel.io의 Try it out에서 실행해봅니다. Presets은 react를 체크하는 걸 잊지 마세요. 결과물을 보면 JSX의 정체를 확인할 수 있습니다.