JSX

JS 파일도 리액트에서 UI를 구현하는 데 사용될 수 있지만,  JSX를 사용하는 것이 일반적이다.

JSX란 자바스크립트를 확장한 문법이다. 자바스크립트에서 HTML 문법을 사용할 수 있으며, 리액트에서 UI를 구성하는 데 사용된다. 

 

브라우저는 JSX를 이해하지  못하기 때문에 JSX 코드를 JavaScript 코드로 변환해야 한다.

Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구 중 하나이다. Babel을 사용하여 JSX를 자바스크립트로 변환하면, 리액트에서 작성한 UI 구성 요소를 일반적인 자바스크립트 코드로 컴파일하여 브라우저에서 실행할 수 있다.

pnpm add -D babel

 

< JSX와 HTML의 다른점 >

 

• 속성
  Class 대신 ClassName을 사용해야 하며, for 대신 htmlFor를 사용해야 한다. 그 이유는 class와 for가 자바스크립트에서 예약어이기 때문이다.
• 스타일
  HTML과는 달리 CSS 문자열을 받지 않으며, 스타일 이름을 카멜 표기법으로 지정한 JS 객체를 받는다.

 

< JSX 사용 방법 >

 

• JSX 파일은 리액트 모듈을 사용하지 않더라도 import 해줘야 한다.
• 자바스크립트를 JSX 내부에서 사용할 때에는 중괄호를 사용해야 한다.
• 사용자가 정의한 컴포넌트의 이름은 반드시 대문자로 시작해야 한다. ( 소문자로 시작하는 것은 <div>와 같은 컴포넌트라는 의미 )

 

리액트로 작성한 코드들은 자바스크립트로 변환된다. 그렇기에 .js와 .jsx는 확장자로서의 차이가 없다. 

타입스크립트의 경우, .tsx에서는 JSX 문법을 사용할 수 있고, 리액트에서 UI를 작성할 때 타입스크립트를 사용하여 타입 검사를 수행하는 데 사용된다. .ts는 JSX 문법이 불가능하고, 자바스크립트 코드에서 타입 검사와 컴파일 오류 검사를 수행하는 데 사용된다.