JSX

키워드

• 렌더링로직, 기타 UI 로직
• injection attack
• element

왜 JSX 인가?

JSX 란 JavaScript XML 로, XML 태그와 같이 자바스크립트 표현식을 사용하는 것을 뜻한다. 예시는 다음과 같다.

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

리액트에서 JSX 를 활용하는 이유는, 자바스크립트로 렌더링 로직을 표현하기 위함이다. JSX 를 통해, 컴포넌트라고 하는 JS 모듈안에서 렌더링 로직과 기타 UI 로직(상태 변화, 데이터 준비 등)을 표현할 수 있게 된다.

기존에 html 파일, js 파일을 분리하던 것과 같이 로직을 별도의 파일로 분리하는 방법도 있다. 하지만, 리액트에서는 렌더링 로직이 기타 UI 로직과 깊이 연관되어 있다는 사실을 받아들인다. 따라서, 파일을 분리하는 대신에, 느슨하게 연결된 컴포넌트 단위로 관심사의 분리를 행한다.

Injection Attack

사용자로부터 삽입되는 문자열이 공격코드를 포함하고 있을 때 문제가 된다. 리액트에서는 JSX 포함되는 텍스트를 모두 escape 하므로, 공격코드가 들어있더라도 기능하지 못한다.

JSX 의 결과물

Babel 을 통해 다음 JSX 를 컴파일 할 수 있다.

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

결과물은 아래와 같이 객체가 된다. 이 객체를 element 라고 부른다.

// 주의: 단순화된 형태
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

감상

리액트의 컴포넌트가 왜 그렇게 생겼는지를 알 수 있게 해주는 챕터였다. 관심사의 분리를 어떤 방식으로 행할지에 따라, UI 구성단위의 모양을 다르게 설계해준 다는 점에서 흥미로웠다.

리액트 컴포넌트에 대해서도 더욱 명료하게 정리가 되었다. 내부에 아무리 많은 로직이 있더라도, 컴포넌트는 결국 react element 를 반환한다.