[영어로 배우는 React] MAIN CONCEPTS - 2. JSX 소개

공식 사이트 페이지 : http://devapps.gnu.ac.kr:1201/nxui/index.html

 

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

여기 선언문이 하나 있습니다. 프로그램을 조금 아시는 분이면 이상함을 느끼실 겁니다. 전 못느꼈지만...

element 라는 변수에 값을 할당하는데, 이건 문자도 아니고 html도 아니네요. 문자라면 따옴표로 감싸야 하고, 자바스크립트 내에 html 태그를 바로 쓸 수는 없으니까요. 어쨌든 결과를 말씀드리면, 이 수식은 맞는 표현이고, 이렇게 쓰는 방식을 JSX라고 합니다. JSX의 풀네임은 'JavaScript XML'입니다. 자바스크립트와 XML을 합쳐쓰는거죠.

이번 페이지에서는 JSX로 리액트의 elements들을 만들고, 그것들을 DOM으로 어떻게 바꾸는지를 알아볼 겁니다. 시작하겠습니다.

 

왜 JSX를 쓰는가? 

보통 웹페이지를 구성할때 화면 표시를 담당하는 html과 로직을 담당하는 자바스크립트를 구분해서 하는 경우가 많습니다. 그에 반해 리액트는 문제별로 구분하는 방식을 사용합니다. 한 컴포넌트에 html과 자바스크립트가 같이 가지고 있는거죠. 인터넷 초창기에 이렇게 사용을 했었는데, 여러가지 이유로 화면과 로직이 분리되었습니다. 다시 옛날로 돌아간 느낌이 있네요. 따로 구분하는것보다 얼마나 유용한지 살펴보겠습니다. 

 

JSX안에 포함된 수식 

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

위 코드를 보면, name 변수를 선언하고, 그 다음줄에서 {name} 으로 값을 참조하였습니다. 이처림 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')
);

위 예제는 함수를 JSX 내부에 사용한 예제입니다. 함수 결괏값이 들어가겠죠?

또, 위 예제에서는 JSX를 여러줄에 걸쳐서 표현했습니다. 자동적으로 세미콜론이 찍히는걸 방지하기 위해 괄호로 감싸서 표현해 주었습니다. 

 

JSX 역시 표현식이다.

위에서도 언급했지만 JSX내부에 if문, for문, 변수선언, 인수선언, 함수호출 등 자바스크립트 표현식의 대부분을 넣을 수 있습니다. 

 

JSX로 html 속성 표기

html 속성표기법은 아래와 같이 두가지 방법을 사용하면 됩니다. 두가지 방법 중 하나만 사용해야지, 둘을 같이 사용할 수는 없습니다.

 

const element = <a href="https://www.reactjs.org"> link </a>;    // string 으로 표기

const element = <img src={user.avatarUrl}></img>; // 대괄호로 표기

참고로 JSX가 html보다 자바스크립트와 더 가까워진 이래로 리액트 DOM은 프로퍼티를 표현 할 때, 카멜케이스 표기법을 사용합니다. 그래서 JSX안에서 class는 className, tabindex는 tabIndex로 바뀌었습니다. 

 

JSX로 자식엘리먼트 표기

태그가 비었다면, XML 처럼 '/>' 를 이용해 바로 태그를 닫을 수 있습니다.

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

 JSX 태그가 자식을 가지고 있다면, 괄호를 이용해 여러줄로 자식을 표기해 줍니다. 

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

 

JSX의 인젝션 공격 예방

JSX는 인젝션 공격에 강합니다. JSX에 내포된 값들은 스트링으로 변환되기 때문에 크로스 사이트 스크립팅과 같은 공격을 효과적으로 차단할 수 있습니다.

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

위 예에서는 title에 어떤 악의적인 코드가 들어와도, {title}이 title값을 스트링으로 변환하기 때문에 프로그램에 악의적인 영향을 미칠 수 없습니다.

 

JSX 오브젝트 표현

babel은 JSX를 React.createElement 함수를 호출하여 컴파일합니다.

그래서, 아래의 두 식은 같습니다.

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

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

React.createElement는 디버깅 없는 코드를 만들기 위해 약간의 체크들을 하지만, 본질적으로 아래와 같은 React Elements를 만듭니다.

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

리액트는 React Elements를 DOM을 만드는데 사용하고, 항상 최신으로 유지합니다.

 

다음 섹션에서 리액트가 React Elemens를 어떻게 렌더링 하는지 살펴볼겁니다. 

추가로 babel을 선언해서 쓰라고 추천하네요. ES6와 JSX코드가 적절하게 강조된다고 합니다. 

문서를 해석을 하는건지, 공부를 하는건지 헷갈립니다. 그래도 계속 진행하겠습니다.