[React 공식문서 읽기] Main Concepts 2. Introducing JSX

Introducing JSX

 

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

 

👆 자바스크립트와 HTML이 마구 뒤섞여 있는 듯한 요상한 구문처럼 보이지만
이 놈은 JSX다.

 

JSX는 JavaScript의 확장 문법이며

리액트의 UI를 묘사하는 데 사용된다.

template language를 생각나게 하지만 JavaScript임

※템플릿 언어란?

 

JSX는 React "elements"를 만든다.

JSX에 대해 좀 더 자세히 알아보자.

---

Why JSX?

우선, JSX가 리액트를 사용하는 필수조건은 아니다.

 

리액트 이전에 클라이언트를 구성하는 방법

즉, HTML과 JavaScript를 따로 작성하고 <script>태그로 연결하는 방법은

마크업(markup)과 로직을 서로 다른 파일에 작성하기 때문에 기술을 인위적으로 분리한다.

어떤 엘리먼트에 어떤 함수가 연결되어 있는지 한 눈에 알아보기 어렵다.

 

반면에

리액트는 마크업과 로직을 모두 포함하고 있는 유닛인 컴포넌트(Component)를 사용한다.

리액트는 렌더링 로직이 다른 UI로직

(어떻게 이벤트를 처리하는지, 상태가 변경되는지, 데이터가 표시되기 전 준비되는지)

과 연결되어 있다.

 

JSX는 JS코드 내에서 UI모습을 직관적으로 보여준다.

JSX가 필수는 아니지만 리액트가 더 유용한 에러, 경고메세지를 표시할 수 있게 한다.

---

Embedding Expressions in JSX

Q. JSX 안에서 변수를 사용하려면?

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>; // 이게 JSX다

ReactDOM.render( element, document.getElementById('root') );

A. { }(중괄호)로 묶어준다.

위 코드는 id가 root인 엘리먼트에 <h1>Hello, Josh Perez</h1>를 렌더한다.

 

변수 뿐 아니라 자바스크립트 표현(expression)이라면 중괄호로 묶어 JSX에서 사용할 수 있다.

  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')
  );

👆 함수도 실행 가능~

위 코드는 id가 root인 자리에 <h1>Hello, Harper Perez</h1>를 렌더한다.

 

가독성을 위해 JSX를 여러 줄로 나눌 때,
자동 ;(세미콜론) 삽입을 피하기 위해 ( ) 괄호로 묶어 주면 좋다.

---

JSX도 expression이다

컴파일 후엔 JSX는 일반적인 자바스크립트 함수 호출이 되고, 객체로 평가된다.
if문과 for문 안에서 JSX를 사용할 수 있고,
JSX를 변수에 할당, 인자(argument)로 사용하고 또 함수의 리턴값으로도 사용할 수 있다.

 

  function getGreeting(user) {
    if (user) {
      return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
  }

 

---

JSX 속성 지정

속성 지정할 때 "" 따옴표로 감싸는데

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

 

{ } curly braces 중괄호를 사용해서 자바스크립트 expression을 속성으로 넣어줄 수도 있다.

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

 

 

문자열을 넣고 싶으면 따옴표 쓰고, expression을 넣고 싶으면 중괄호를 쓴다.

하나의 속성에 두 개의 값을 넣을 수는 없다.

 

주의

JSX는 HTML보단 JavaScript에 더 가깝기 때문에,
React DOM은 카멜케이스(camelCase)로 속성 이름을 짓는다.
예) JSX에서는 class를 className으로 사용, tabindex -> tabIndex

---

Specifying Children with JSX

XML처럼 바로 닫아도 된다.

  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

사용자 input을 JSX에 넣는 것은 안전하다.

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

 

기본적으로 React DOM 은 JSX에 포함 된 값을 렌더링하기 전에 이스케이프 한다.

(escape하는 게 뭔지 모르겠음)

따라서 응용 프로그램에 명시적으로 작성되지 않은 것은 주입 할 수 없다.

모든 것이 렌더링되기 전에 문자열로 변환된다.

이를 통해 XSS(cross-site-scripting)공격을 방지할 수 있다.

(왜 렌더되기 전에 문자열로 변환되면 XSS 막을 수 있는지는 모르겠음)

---

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls.

These two examples are identical:

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

  const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
  );

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

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

These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

We will explore rendering React elements to the DOM in the next section.

 

Tip:

We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted.