[React] JSX(JavaScriptXML)은 JavaScript의 일종일까?

JSX

Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법

 

❓ XML이란?

• XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어의 일종이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.
• 예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다.
• 엄밀히 말하자면 XML은 마크업 언어라기 보다 마크업 언어를 정의하기 위한 언어라고 할 수있다.

 

 

 

JavaScript는 웹 브라우저에서 동적인 웹 페이지를 만들기 위해 사용되는 프로그래밍 언어이고, 웹 페이지의 동적인 부분을 다루는 데 사용된다
XML은 마크업 언어의 일종이고, XML은 데이터를 표시하는 데 사용된다.
이 둘은 서로 다른 용도를 가지고 있으며 직접적으로 관련이 없다.

그러나 JavaScript를 사용하여 XML 데이터를 처리하고 조작할 수 있다고 한다.
예를 들어, JavaScript에서는 XMLHttpRequest 객체를 사용하여 서버로부터 XML 데이터를 가져와서 처리할 수 있다. 또한 최신 웹 개발에서는 XML 대신 JSON이 더 일반적으로 사용되므로 JavaScript에서는 JSON 데이터를 더 쉽게 다룰 수 있다.

브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환되기 때문에
JSX코드로 작성한 것의 최종형태는 결국 자바스크립트 코드가 된다.

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

/**
 * @type       <div> <span> 과 같은 태그나 리액트 컴포넌트가 올 수 있다.
 * @props      속성들
 * @children   현재 element가 포함하고있는 자식 element
 */

React.createElement(type, [props], [...children])

 

 

 React.createElement() 함수의 결과로 아래와 같은 자바스크립트 객체를 얻게 된다.
리액트는 이러한 객체들을 읽어서 DOM을 만드는데 사용하고 항상 최신상태를 유지하는 것이다

// JSX사용
const element = (
	<h1 className="greeting">
    	Hello world
    </h1>
)

// JSX미사용
const element = React.createElement('h1', {className: 'greeting'}, 'Hello world')


// React.createElement()변환 결과로 아래와 같은 객체가 생성된다.
const element = {
	type: 'h1',
    props: {
    		className: 'greeting',
            children: 'Hello world'
    }
}

 

 

 

---

 

 

JSX의 특징

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태

-> 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙

function App(){
    return(
     <div>
         <h1>테스트1</h1>
         <h2>테스트2</h2>
        </div>
    )
}

2. 자바스크립의 값을 JSX 안에서 렌더링 가능

name의 값을 {name} 과 같이 넣어서 렌더링할 수 있습니다.

export default function App() {
const name = '리액트';
    return (
    <>
     <h1>{name}</h1>
    </>
  );
}

3. JSX 내부의 자바스크립트 표현식 내에서 if문을 사용불가,  조건부 연산자(삼항 연산자)를 사용

function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'? (
           <h1>리액트</h1>
          ) : (
           <h2>리액트 아님</h2>
          )}
   </div>    
  );
}

4. undefined를 렌더링하지 않아야 합니다.

function App() {
  const name = undefined;
  return name;  
}

이는 아래와 같이 OR 연산자를 사용해 방지할 수 있습니다.

function App() {
  const name = undefined;
  return name || "값이 undefined";  
}

단, JSX 내부에서 undefined를 렌더링 하는 것은 에러가 나지 않습니다.

function App() {
  const name = undefined;
  return (
   <div>{name}</div>
  )
}

5. 인라인스타일을 지정할 때  JSX에서 사용할 때 카멜 표기법으로 작성 / className 사용

function App() {
  const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }
  return (
   <div style={style}>테스트</div>
  )
}

<div className="classEx1"> Hello World </div>

 

 

---

 

JSX의 장점

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

// JSX사용
<div>Hello, {name}</div>

const element = (
	<h1 className="greeting">
    	Hello world
    </h1>
)

// JSX미사용
React.createElement('div', null, `Hello, ${name}`);

const element = React.createElement('h1', {className: 'greeting'}, 'Hello world')

 

2. XSS 공격 방어

const title = response.porentialMaliciousInput;
 
const element = <h1>{title}</h1>;

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

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

 

기본적으로 리액트 DOM에서는 랜더링하기전에 임베딩된 값을 이스케이프한 다음 문자열로 변환한다.
따라서 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.

 

 

❓ 이스케이프(Escape)?

특정 문자를 원래의 기능에서 벗어나게 변환하는 행위를 이스케이프(Escape)라고 한다.
&은 &amp;로 <은 &lt;로 >은 &gt;로 "은 &quot;로 '은 &#39로 띄어쓰기는 &nbsp;로