[ React ] JSX란?

[ React ] React에서 slot 사용하기

위의 글에서 JSX를 이용해서 slot을 구현한다고 했는데, 그럼 JSX는 무엇이고 어떤 특징을 가지고 있을까

공식 문서를 간단하게만 정리해봤다.

 

 

 

 

JSX는 Javascript를 확장한 문법이다.

JSX는 React 엘리먼트를 생성한다.

React에서 Javascript 코드 안에서 UI 관련 작업을 하기 위해 사용한다.

 

 

 

 

JSX도 표현식이다.

JSX는 Javascript 객체로 컴파일된다. 즉, JSX를 변수처럼 사용할 수 있다. (if, for문, 변수 할당, props, 함수 return 등)

 

 

 

 

JSX는 XSS 공격을 방지할 수 있다.

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하기 때문에, 애플리케이션에 명시적으로 작성되지 않은 내용은 주입되지 않는다.

모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이런 특성으로 인해 XSS 공격을 방지할 수 있다.

 

 

※ 이스케이프

• 특정 문자나 문자열을 다른 의미를 가진 문자로 해석되지 않도록 처리하는 것
• ex) <script> 태그를 포함한 문자열이 JSX에 포함되어 있을 때 이것을 그대로 렌더링하면 XSS 공격에 취약해질 수 있다. 이를 방지하기 위해 React DOM은 JSX에 삽입된 값을 이스케이프하여 <script> 태그를 해석하지 못하도록 처리한다.
• 즉, 잠재적으로 위험한 문자나 문자열을 안전하게 다룰 수 있도록 처리하는 것

 

※ XSS(Cross-site scripting)

• 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점
• 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다.

 

 

 

 

JSX는 객체를 표현한다.

JSX를 사용하는 것은 React.createElement()를 호출하여 React 엘리먼트를 생성하는 것과 동일하다.

→ React에서 JSX를 사용하는 것은 필수가 아니다. JSX로 할 수 있는 것은 순수 Javascript로도 전부 가능하다. (React.Component, React.createElement 등 사용)

오히려 간단한 작업은 빌드 환경에서 컴파일 설정이 불필요한 순수 Javascript로 하는 것이 편리할 수 있다.

 

 

 

 

---

[ 참고 자료 ]

JSX 소개 – React

JSX 없이 사용하는 React – React