JSX의 개념과 장점

 JSX(JavaScriptXML)란?

 A syntax extension to javaScript : 자바스크립트의 확장 문법

이라는 뜻으로 JavaScript에 XML을 추가하여 확장한 문법이다.

 

다음의 기초적인 JSX 코드 예시를 보자

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

뭔가 자바스크립트 코드같은데 대입연산자 옆에를 보면 HTML코드가 들어가 있다.

이와 같이 Javascript와 HTML코드를 일정한 문법규칙을 가지고 혼용해서 사용할 수 있는 문법이 JSX 문법이다.

 

JSX는 이랙트로 프로젝트를 개발할 댸 사용되므로 공식적인 자바스크립트 문법은 아니다.

 

 또한 브라우저에서 실행하기 전에 바벨이라는 것을 사용하여 일반 자바스크립트 형태의 코드로 변환되기 때문에

우리가 JSX코드로 작성한 것의 최종형태는 결국 자바스크립트 코드이다.

 

여기서 JSX 코드를 자바스크립트 코드로 바뀌어주는 함수가 있는데 다음과 같다.

 

그렇다면 JSX를 사용한 코드와 아닌 코드를 비교해보면 어떨까?

 두 코드다 결과적으로 같은 기능을 하지만 코드 자체만 보면 JSX로 작성된 코드가 훨씬 가독성이 좋은것을 볼 수 있으며

둘다 어찌되었건 React.createElement() 함수를 사용한다는 것을 볼 수 있다.

 

 React.createElement() 함수의 결과로 위와 같인 자바스크립트 객체를 얻게 된다.

리액트는 이러한 객체들을 읽어서 DOM을 만드는데 사용하고 항상 최신상태를 유지하는 것이다.

 

createElement() 함수의 파라미터는 다음과 같다.

 

type : <div> <span> 과 같은 태그나 리액트 컴포넌트가 올 수 있다.

props : 속성들

children : 현재 element가 포함하고있는 자식 element

 

 리액트에서 JSX를 쓰는 것이 필수는 아니다. 왜냐하면 직접 모든 코드를 createElement()함수를 사용해서 개발하면

되기 때문이다. 다만 JSX 사용하면 다음과 같은 장점들이 있기 때문에 사용하도록한다.

 

 

JSX의 장점

1. 코드가 간결해지고 가독성이 좋아진다.

 

2. XSS 공격 방어

const title = response.porentialMaliciousInput;

const element = <h1>{title}</h1>;

먼저 위와 같이  title이라는 변수에 보안 위협이 존재하는 코드가 삽입되었다고 가정해보자

그런데 그 아래에 나오는 JSX코드에서는  {} 를 통해서 타이틀 변수를 임베딩하고 있는데

 

 기본적으로 리액트 DOM에서는 랜더링하기전에 임베딩된 값을 이스케이프한 다음 문자열로 변환한다.

따라서 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.

 

이스케이프(Escape)

특정 문자를 원래의 기능에서 벗어나게 변환하는 행위를 이스케이프(Escape)라고 한다.

&은 &amp;로
<은 &lt;로
>은 &gt;로
"은 &quot;로
'은 &#39로
띄어쓰기는 &nbsp;로

예를 들어 HTML에서 다음과 같은 상황은 렌더링이 되지 않는다.

<div><onlydev</div>

HTML은 '<'을 태그의 시작으로 인식하기 때문에 뒷부분이 에러가 나서 제대로 렌더링이 되지 않는다. 이런 상황들을 고려해 원래의 기능에서 벗어난 문자열로 변환하여 의도대로 구문 분석을 하도록 이스케이프를 한다.

<div>&lt;onlydev</div>