Dev-Tino 6주차(3):: JSX란?

2024.08.04

const element = <h1>Hello, world!</h1>;

위와 같은 문법이 있다. 이는 문자열이나 HTML이 아니다. ‘JSX’라 불리는, 자바 스크립트를 확장한 이 문법은 UI가 어떻게 생겨야 하는지를 설명하기 위해 React와 함께 사용할 것을 권장한다. JSX는 React 엘리먼트(element)를 생성한다.

JSX
-JSX(JavaScript XML), JS에 XML을 추가하여 확장한 것.
-React “엘리먼트” 를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다.
React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다. React는 별도의 파일에 마크업(<>)과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 모두를 ‘컴포넌트’라 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. React 사용시, JSX 사용이 필수는 아니나 이것이 시각적으로 더 도움이 된다는 말이 많다.
JS의 장점
1. 보기 쉽고 익숙하다
JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립트만 사용한 코드보다 더 익숙하고 간결하며 가독성이 좋다.
2. 높은 활용도
JSX에서는 div, span과 같은 HTML 태그를 사용할 수 있으며, 개발자가 만든 컴포넌트도 JSX 안에서 작성할 수 있다.

이 JS는 다음과 같이 사용한다::

표현식 포함하기

복사됨

JSX도 표현식이다

복사됨

JSX 속성 정의

복사됨

JSX로 자식 정의

복사됨

JSX는 주입 공격을 방지한다

복사됨

JS는 객체를 표현한다.