React - JSX란?

JSX

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

자바스크립트나 HTML에 익숙해진 나에게
이건 뭐지? 라는 생각이 첫번째로 들었을 것이다.
자바스크립트 변수에다 HTML태그를 넣는다니!?
그래도 한번 해봤다.

역시나 에러가 난다.
공식문서에는 저것이 문자열도 아니며, HTML 태그도 아니라고 한다.
바로 JSX라 하며, javascript를 확장한 문법이라고 한다!
(X는 Extend 의 약자일까..?했는데 Javascript XML 이라고 한다ㅎ.. 그렇다면 XML 의 기능도 갖고 있겠지 라고 예상하며..)

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
by 공식문서

사용법

1. {}안에 자바스크립트 코드 사용하기
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
                     //      ↑요 부분이 변수에 해당하며
                     //     {  }이 안에 함수도 넣고 
                     //     변수도 넣는다. 
                     // 기존의 HTML에선 상상도 못하는일!
ReactDOM.render(  
  element,
  document.getElementById('root') //Root의 위치를 찾아 
                                  //element의 내용을
                                  // 출력해준다.
);


2. 속성정의

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


3.자식정의가능
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
//자식이 있을땐 () 로 감싸준다.

4.XSS방어

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

ReactDOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 탈출하므로 앱에
명시적으로 작성되지 않은 내용은 주입되지 않고, 
모든 항목은 렌더링 되기 전에 문자열로 반환됩니다. 
이런 특성으로 XSS공격을 방지할수 있다고 한다.


5. babel 사용하기(추가설치해야하는 기능)

다음 두개의 코드는 동일한 코드이다.

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

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
); ==>
  React.createElement()는 버그가 없는 코드를
작성하는데 도움을 주며, 실행하면 다음과 같은 
객체를 생성한다. 이게 위의 두번째 엘리먼트의 결과다.
**이것을 React엘리먼트라고 한다**
  const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

JSX에 대해서 알아보았는데 갑자기 코드의 구조가 바뀌다보니
낯선감이 있다. 차차 괜찮아질거라 믿는다.
다음 주제는 virtual DOM!