04. JSX/TSX

Taesoo Kim·2023년 3월 2일

React101

목록 보기

5/8

오늘은 간단히 리액트에서 주로 쓰이는 파일 확장자인 jsx/tsx를 알아보겠습니다.

JSX?

JSX는 Javascript XML의 약자로, 자바스크립트에 마크업을 쓸 수 있도록 하는 일종의 JS 확장입니다. 기존에 마크업은 xml으로, 로직은 js로 짜는것에 괴리감이 있었고, '이럴 바엔 그냥 다 퉁쳐서 쓰자'라는게 JSX의 시작이 되겠습니다.
리액트에서 굳이 jsx을 써야하지는 않습니다. CreateElement같은 바닐라JS로도 충분히 작성이 가능하죠. 하지만, 이러면 리액트를 쓰는 의미가 없어지기 때문에, jsx 활용하여 로직과 UI를 컴포넌트 단위로 작성하는 것입니다. TSX는 JS 대신 TS가 쓰일때 오는 확장자입니다. 그럼 이제부터 jsx를 어떻게 사용하는지, 또 이면에서는 어떻게 돌아가는지 살펴보겠습니다.

Basics

jsx는 마크업을 변수에 저장할 수 있도록 합니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

마크업 사이에는 {} 괄호를 사용해서 어떤 JS 문법이라도 넣을 수 있습니다. 반복문이나 조건문도요.
{} 괄호는 마크업의 attribute을 줄때도 사용 할 수 있습니다.

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

또한 XSS (cross-site-scripting)를 방어 할 수 있다고 알려져 있습니다.(솔직히 이거 건드릴 자신이 없어요..ㅎㅎ)

JSX in Depth

jsx를 조금 더 깊게 파보자면, 위에서 살짝 언급했듯, jsx파일은 babel을 통해 브라우저에서 돌아가는 JS로 업그레이드/다운그레이드 되어 실행됩니다. 예를들어,

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

같은 컴포넌트는

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

같이 바벨을 통해 컴파일 됩니다. 따라서 후자같은 방법으로 리액트를 개발해도 아무 상관이 없습니다. 하지만, 저렇게도 된다를 알아두면 되고, 전자같이 jsx 형식으로 작성하는게 서로서로 좋습니다.

또한 JSX는 element type으로 general한 표현은 사용하지 못합니다. 예를들어,

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}

같은 형식은 안되고, return 값에 components[props.storyType]를 변수에 저장시켜서 사용하는 방식으로, 마치

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}