React와 함께 작업할 때, JSX(JavaScript XML)를 사용하여 컴포넌트를 작성하는 것은 편리합니다. 하지만 일반 JavaScript로 변환하여 브라우저에서 실행해야 하는 경우가 있습니다. 이때 Babel을 사용하면 JSX를 JavaScript로 변환할 수 있습니다.

Babel 설치하기

먼저 Babel을 사용하기 위해 npm을 통해 Babel을 설치해야 합니다. 아래 명령어를 사용하여 Babel과 JSX 변환 플러그인을 설치합니다.

npm install --save-dev @babel/cli @babel/preset-react

Babel 설정하기

Babel을 설치한 후, 프로젝트 루트 디렉토리에 .babelrc라는 파일을 생성하고 다음과 같이 설정합니다.

{
  "presets": ["@babel/preset-react"]
}

위 설정은 Babel에게 JSX를 JavaScript로 변환하도록 지시합니다.

변환 실행하기

이제 Babel을 사용하여 JSX를 JavaScript로 변환할 수 있습니다. 변환할 JSX 코드가 포함된 파일과 변환된 결과를 저장할 파일을 지정하고 아래 명령어를 실행합니다.

npx babel src/components -d dist/components

위 명령어는 src/components 디렉토리의 JSX 파일을 변환하여 dist/components 디렉토리에 저장합니다.

요약

Babel은 JSX를 JavaScript로 변환할 수 있는 유용한 도구입니다. 설치 및 설정 후 Babel을 사용하여 JSX를 JavaScript로 변환할 수 있으며, 이를 통해 React 애플리케이션을 일반 JavaScript로 실행할 수 있습니다.

참고 자료

• Babel 공식 문서: https://babeljs.io/docs/
• Babel 프리셋 React 문서: https://babeljs.io/docs/en/babel-preset-react