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