ReactㅣJSX를 JS로 변환

브라우저는 JSX를 이해하지 못하기 때문에 JSX 코드를 JavaScript 코드로 변환해야 한다.
JSX를 JavaScript(JS)로 변환하는 과정은 바벨(Babel)과 같은 도구를 사용하여 수행된다.

Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구 중 하나이다.
Babel을 사용하면 JSX를 JavaScript 코드로 변환하고, 이 코드를 브라우저에서 실행할 수 있도록 컴파일할 수 있다.

Babel을 사용하여 JSX를 JavaScript로 변환하는 과정은 다음과 같다.

1. Babel 설치: 먼저 Babel을 설치해야 한다. npm을 사용하여 Babel과 JSX 변환에 필요한 모듈을 설치할 수 있다.

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

2. .babelrc 설정: 프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고, 다음과 같이 설정한다.

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

3.JSX 변환: JSX 코드가 포함된 파일을 Babel CLI를 사용하여 JavaScript로 변환한다.

npx babel --watch src --out-dir dist --presets @babel/preset-react

위 명령어는 src 폴더의 파일을 변환하여 dist 폴더에 저장하고, 변환된 코드를 모니터링하면서 변경 사항이 있을 때마다 자동으로 다시 컴파일한다.

이렇게 Babel을 사용하여 JSX를 JavaScript로 변환하면, React에서 작성한 UI 구성 요소를 일반적인 JavaScript 코드로 컴파일하여 브라우저에서 실행할 수 있다.

참고 글 : https://subtlething.tistory.com/112
참고글을 보시면 좀 더 자세하게 볼 수 있어요!