JSX(JavaScript XML)
React에서 사용하는 React 전용 HTML 이다. React에서는 HTML 대신 JSX를 사용한다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 JS문법은 아니다.
웹브라우저는 HTML, CSS, JAVASCRIPT 만 읽을 수 있지 않나요??
정확합니다! 우리는 React에서 사용하도록 만들어진 HTML인 JSX를 코딩합니다.
하지만, 최종적으로 소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환되어 실행됩니다!
const element = <h1>Hello, world!</h1>;위에 문법은 문자열도, HTML도 아니다.
JSX라 하면 JS를 확장한 문법. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JS의 모든 기능이 포함된다.
JSX란?
React에서는 본질적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state 가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등) 과 연결된다는 사실을 받아들인다.
JSX 스타일링
- JSX에서 JS 문법을 쓰려면
{}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어주어야함. - 카멜 표기법으로 작성해야한다.
HTML 코드
<div>
<div class = "title">Hello</div>
<div onclick = "alert();">GodDaeHee!</div>
</div>
JSX 코드
<div>
<div className = "title">Hello</div>
<div onClick = "alert();">GodDaeHee!</div>
</div>