[React Docs 번역] Introducing JSX

김승엽

Published in

Berkbach

6 min readApr 11, 2020

🗂 목차

🎙 Introducing JSX

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

이 변수는 문자열도, HTML도 아닙니다. 이것은 JSX 라고 불리는데 JSX는 JavaScript에서 확장된 문법 입니다. 화면의 UI의 모양을 묘사하기 위해 React와 함께 이것을 사용하는 것을 권장합니다. JSX는 EJS같은 템플릿 언어처럼 보이지만 JavaScript의 모든 기능을 포함하고 있습니다. JSX는 React의 “element” 를 생성합니다.

JSX를 시작하기 전에 JSX의 기본 개념을 알아보겠습니다.

🤷‍♂️ Why JSX?

React의 렌더링 로직은 아래와 같은 UI 로직과 본질적으로 연결되어있다는 사실을 포함합니다.

이벤트 처리 방식
시간에 따른 상태 변화 방식
화면을 위한 데이터 준비 방식

React는 마크업 (markup.html) 과 로직 (logic.js) 의 파일을 분리해서 인위적으로 기술을 나누는것 대신 둘 다 포함하는 “components”라는 유닛 (component.jsx) 으로 관심사를 분리합니다. 만약 당신이 JS에 마크업을 넣는것이 익숙하지 않다면 아래 동영상이 도움을 줄 것입니다.

React에 JSX가 필수는 아니지만, 사람들이 JS 내부에서 JSX를 사용해서 UI를 작업할때 시각적인 도움이 된다는 것을 발견했습니다. 또한 JSX는 React에서 도움이 되는 에러 및 경고 메세지를 표시 해줍니다.

Embedding Expressions in JSX

아래 예제에서 name 이라는 변수를 선언하고 중괄호에 감싸 JSX 안에 사용합니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 안 중괄호에 유효한 모든 JS 표현식을 넣을 수 있습니다. 예로 2 + 2 , user.firstName , formatName(user) 이 있습니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);ReactDOM.render(
  element,
  document.getElementById('root')
);

가독성을 위해서 JSX를 여러 줄로 나눴습니다. 필수는 아니지만 세미콜론이 자동으로 삽입되는 것을 방지하기 위해서 괄호로 묶는 것을 권장합니다.

JSX is an Expression Too

컴파일이 끝나면, JSX 표현식은 정규 JS 함수 호출이 되고 JS 객체로 인식됩니다. 즉, JSX를 if , for 구문의 인자, 함수의 리턴값으로 사용 가능합니다.

Specifying Attributes with JSX

태그의 속성은 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

const element = <div tabIndex="0"></div>;

또한, 중괄호를 이용해서 JS 표현식을 속성에 정의할 수 있습니다.

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

속성을 JS 표현식으로 정의할 때 중괄호 안에 따옴표를 넣지 마세요. 또한 같은 속성 안에 따옴표와 중괄호를 동시에 사용하면 안됩니다.

경고: JSX는 HTML보단 JS에 가깝기 때문에 ReactDOM은 HTML 속성을 camelCase로 사용합니다. 예로, JSX에서 class는 className으로 됩니다.

Specifying Children with JSX

만약 태그가 비어있다면, /> 를 사용해서 즉시 닫아줘야합니다.

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

JSX 태그들은 children을 가집니다.

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

JSX Prevents Injection Attacks

JSX에 사용자 입력을 삽입하는 것은 안전합니다.

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

기본적으로, React DOM은 렌더링 하기 전에 JSX에 삽입된 모든 값들을 escape 합니다. 그러므로 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든것은 렌더링 전에 문자열로 전환됩니다. 이것은 XSS 공격을 방지하는데 도움을 줍니다.

JSX Represents Objects

Babel은 JSX를 React.createElement() 를 호출해서 컴파일합니다. 아래 두 예제는 동일합니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);// --- Same Example ---const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지를 검사합니다. 기본적으로 다음과 같은 객체를 생성합니다.

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 “React element” 라고 부릅니다. React element 는 화면에 표시 하려는 항목에 대한 설명 입니다. React는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용합니다.

📚 정리 및 참고 자료

JSX는 JS에서 확장된 문법으로 JS의 모든 기능을 포함합니다.
React는 createElement()를 호출해서 JSX를 렌더링하고 JS 객체를 리턴합니다.
React DOM은 JSX를 렌더링 전에 문자열로 변환해서 XSS 공격을 방지합니다.
관심사 분리 (Separation of Concerns)