React) JSX

 

JSX란?

`React` 문서에 따르면 아래와 같습니다

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.

 

쉽게 말하면 `JavaScript`에서 `HTML` 태그를 작성 가능하게 하여 하나의 `JS` 파일에서 모든 내용을 작성 가능하게 한 기술을 말합니다. 

 

JSX의 특징

위의 설명과 같이 `JS`문법과 태그를 같이 사용이 가능합니다 

`JSX`도 `JavaScript`에서 인식하는 객체이므로 함수를 호출 할 수 있습니다. 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

 

각 태그의 어트리뷰트에 따옴표를 통해 리터럴을 정의하거나, 중괄호를 통해 `JavsScript` 표현식을 입력할 수 있습니다. 

const element = <a href="https://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

 

`JSX`는 명명정책시, `camelCase`를 사용합니다 

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

 

`JSX`는 주입 공격을 방지합니다.

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

이스케이프

사용자가 웹 폼을 통해 입력한 데이터에 <script> 태그나 다른 HTML 태그가 포함되어 있을 경우, 이스케이프 과정을 거치면 이 태그들은 브라우저에 의해 코드로 해석되지 않고 그대로 텍스트로 출력됩니다. React DOM은 JSX에 삽입된 값을 렌더링하기 전에 이스케이프 처리를 자동으로 해서, 실제 HTML로 주입되기 전에 이러한 값들이 안전하게 처리되도록 보장합니다.

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;