$$config title: [React] JSX 이해 및 기초 keywords: - React 코드 변환 - Babel $$ # JSX - Javascript 확장 문법 - HTML코드와 비슷 - 브라우저가 JSX코드를 인식할 수 있도록 Babel 설치해야함 # Babel - 브라우저가 Javascript 형식으로 작성된 코드를 JSX코드로 인식할 수 있도록 자동 변환해주는 변환기(라이브러리) -[https://babeljs.io/](https://babeljs.io/) ### 코드 변환 예시 - 왼쪽 코드가 오른쪽 코드로 인식되도록 변환 ![babel1](https://raw.githubusercontent.com/miruy/Blog_Img/45a5b9875bb167813493b0c56334842c3f60c330/babel1.png) ### Babel 설치 - *study용 설치* 임으로 느릴 수 있음(실무에선 npm install 사용 권장) - @babel/standalone - Installation - Script Tags 코드 ~~~js ~~~ # JSX 사용 시 ## - JSX 사용 시 에러 발생한 경우 react는 오류 보안상 에러를 노출하지 않으므로 작업관리자 창에 뜬 에러 링크를 클릭하여 react 홈페이지에서 에러 확인해야함 ## - Babel이 변환해준 코드는 작업관리자 Head에 담아줌 (확인가능) ## - JSX 문법 규칙 : class -> className, for -> htmlFor # JSX를 사용한 변환된 코드 ~~~js

~~~ ![](https://raw.githubusercontent.com/miruy/Blog_Img/9733fcbfe9e7c567779d8f94d4b9b23e6634a6b9/jsx.png)