[ReactJS] JSX

JSX

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

다음과 같은 변수 선언을 고려해보자.

이 <h1> 태그는 html이나 문자열이 아니다.

이것은 JSX라고 불리는 자바스크립트의 새로운 확장된 문법이다.

리액트 개발자들은 리액트 라이브러를 통해 UI를 표현 하기 위해서 JSX 문법을 사용하기를 추천한다.

JSX를 템플릿 문법이라고 생각할 수도 있지만, 어느 문법보다 강력한 기능을 제공한다.

가장 중요한 점은 JSX는 리액트의 앨리먼트를 생성한다는 것이다.

다음 포스팅에서 엘리먼트를 HTML DOM에 랜더링하는 방법이 있을 것이고,

우선은 JSX를 사용하는 방법에 대해서 알아보도록하자.

 

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를 사용할 때 {}안에 자바스크립트 문법을 넣을수 있다.

위의 코드에서 {formatName(user)} 등이 JSX에 포함된 자바스크립트의 문법이다.

이 코드에서 주목할만한 점은 가독성을 위해서 JSX를 여러 라인에 걸쳐 분리해 놓은 것이다.

또한 리액트 개발자들은 필수 사항은 아니지만 JSX를 괄호에 싸서 처리하는 것을 추천한다.

JSX도 표현식이다.

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

컴파일이 끝나면 JSX는 일반적인 자바스크립트 객체가 된다.

즉, if문과 for문에서 JSX를 사용할 수 있고 변수에 할당하고 인수에 받아들여 리턴까지 가능하다.

다시 말해 1급객체의 속성을 가진다고 할 수 있다.

JSX로 속성(Attribute) 지정하기

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;                                                         

사용자는 JSX에서 속성을 지정할 수 있다.

예를 들어 1번줄 처럼 따옴표를 사용하여 문자열을 리터럴 속성으로 지정하거나

중괄호를 사용하여 속성에 자바스크립트 문법을 포함 시킬수도 있다.

이때 중괄호를 따옴표로 묶으면 문자열 처리되므로 주의하기 바란다.

속성을 지정하기 위해서 따옴표나 중괄호로 묶어야하지만 둘다 같은 속성에 사용해야하는 것은 아니다

또한 JSX는 HTML 보다 자바스크립트에 가깝기 때문에 

속성 이름을 지정할 때 HTML 속성이름이 아닌 camelCase(카멜 표기법)로 지정해야한다.

예를 들어, class는 className, tabindex는 tabIndex가 된다.

JSX는 Insection 공격을 예방한다.

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

위의 코드에서는 사용자 입력을 JSX로 입력받는 것이 안전하다.

기본적으로, React DOM은 랜더링 하기 전에 JSX에 포함된 모든 값을 escape처리한다.

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

다시 말해, 모든 것은 랜더링 되기전에 문자열로 변경되는데 이를 통해 XSS(사이트간 스크립팅) 공격을 예방할 수 있다.

JSX는 객체를 나타낸다

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

Babel은 JSX를  React.createElement 로 컴파일한다.

따라서 위 코드의 두 element 변수는 동일한 의미이다.

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

React.createElement는 버그없이 깔끔한 코드를 작성하는데 도움이 되는 몇가지 검사를 수행하지만,

기본적으로 위와 같은 객체를 만든다.

이 객체를 react elements라고 하며 화면에서 보고 싶은 내용에 대한 설명으로 생각할 수 있다.

리액트는 이러한 객체를 읽고 이를 사용하여 DOM을 구성하고 최신 상태를 유지한다.