[React] JSX란 ?

리액트 자습서에 주요 개념중 2번쨰 개념에 대해 정리한 내용입니다.

JSX란?

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.

 

JSX는 Javascript를 확장한 문법(JavaScript XML)이며, React에서 UI를 구성할 때 사용하는 문법 확장입니다.  HTML과 유사한 구문을 JavaScript 코드 안에 작성할 수 있게 해 주며, UI를 선언적이고 직관적으로 정의할 수 있도록 돕습니다.

특징

• 위에 태그 문법은 문자열도, HTML도아닌 JSX(JavaScript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다.
• JSX는 React “엘리먼트(element)” 를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다.
• React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

하지만 React로 개발하기 위해 꼭 JSX를 사용해야되는것은 아님. JSX를 사용하지 않으면 React.createElement() 메서드를 통해 구현 가능합니다. 아래에서는 JSX의 특징을 상세하게 설명해보겠습니다.

 

1. JSX의 객체 표현

Babel은 JSX를 React.createElement() 호출로 컴파일합니다.

 

위와 같은 JSX코드를 Bable이 컴파일 하면 아래 코드가 실행된다.

 

Babel은 JSX를 컴파일 하기 위해 element를 생성함.(argument로는 tag, object, children)이 들어감

 

Babel이 컴파일하면 위와같은 object가 생성이 된다.=> React Element

 

React는 이 객체를 읽어서 DOM을 구성하고 최신 상태를 유지하는데 사용됩니다.

 

2. 표현식 

JSX의 { 중괄호 } 안에는

유효한 모든 JavaScript 표현식을 넣을 수 있습니다

3. 속성 정의

img태그나 a태그등 HTML에서 사용하던 속성들을 사용할 수 있습니다.

4. XSS 공격 방지

자동으로 이스케이프 처리

JSX는 자동으로 이스케이프(escape) 처리를 합니다. 이스케이프는 사용자 입력이나 외부 데이터를 HTML 또는 JavaScript 코드에 안전하게 삽입하기 위해 특별한 문자를 변환하는 과정입니다. 모든 항목은 렌더링 되기 전에 문자열로 변환되기때문에  XSS 공격을 방지할 수 있습니다.

 

명명 규칙

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.

예를 들어, JSX에서 class는className가 되고 tabindex는 tabIndex 가 됩니다.

 

공식문서 및 다양한 글을 찾아서 정리해보았는데, 다음글에서는 React Element에 대해 소개해보겠습니다. 오늘도 빡코딩합시다!