JSX(javascript XML)

Yoo Jong Hyeon·2023년 5월 31일

React

목록 보기

2/4

JSX(javascript XML)

JSX(javascript XML)는 자바스크립트의 확장 문법이다.

JSX는 자바스크립트 공식 문법은 아니다. 그러나 대다수의 React 개발자는 JSX 문법을 사용하며, React 공식 문서에서도 JSX 문법의 사용을 적극 권장한다.

JSX는 HTML 태그에서 자바스크립트의 표현식을 직접 사용할 수 있게 하며, 본질적으론 React 엘리먼트(element)를 생성한다. 따라서 마크업 언어와 JS로직을 인위적으로 분리하는 기존 방식 대신, 이를 둘 다 포함하는 컴포넌트(component)라는 느슨한 유닛으로 관심사의 분리(SoC, separation of conserns)를 구현한다.

표현식(expression) 포함

const name = 'Yoo Jong Hyeon';
const element = <h1>제 이름은 {name} 입니다.</h1>;

JSX의 중괄호 안에는 유효한 자바스크립트 표현식을 모두 넣을 수 있다.

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

const user = {
  firstName: 'Yoo',
  lastName: 'Jong Hyeon'
};

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

따라서 위 코드 또한 유효하다.

JSX 또한 표현식이다.

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

const user = {
  firstName: 'Yoo',
  lastName: 'Jong Hyeon'
};

function getGreeting(nationality, user) {
  if (nationality === "america") {
    return <h1>Hello, I am {americanFormatName(user)}!</h1>;
  }
  return <h1>제 이름은 {user.firstName + ' ' + user.lastName} 입니다.</h1>;
}

따라서 JSX를 if, for 등 구문 안에서 사용 하거나, 변수에 할당, 파라미터로 받기, 함수의 return 값으로 활용 할 수 있다.

JSX 속성(attribute) 정의

const element = <img src={user.avatarUrl}></img>;

다음과 같이 속성값으로 중괄호를 사용하여 자바스크립트 표현식을 삽입 할 수 있다.

주의할점은 JSX는 HTML보다 자바스크립트에 더 가까운 언어이기 때문에 React DOM은 기존 HTML 문법 대신 카멜케이스 프로퍼티 명명 규칙을 대신 사용한다.

<div class={event}></div> // <- X
<div className={event}></div> // <- O

JSX 는 닫힘 규칙을 준수해야 한다.

const element = <img src={user.avatarUrl}>; // <- X
const element = <img src={user.avatarUrl}></img>; // <- O
const element = <img src={user.avatarUrl} />; // <- O

모든 태그는 여는 태그가 있으면 닫는 태그도 있어야 한다. XML처럼 닫는 방법은 유효하다.

JSX 는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 는 주입 공격(injection attack)에 안전하다.

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.

https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-in-html