React.js - JSX란?

 

 

 

사실 리액트를 쓸 줄은 알지만, 개념적으로는 자세히 알고 있지 못했다.

내가 머리 속으로 얼추 이해하고는 있는 개념이라도, 남에게 설명은 잘 못하겠다. 다시 한번 공부하며 개념을 정리해보자.

리액트 공식 문서를 읽어가며 정리!

 

https://ko.reactjs.org/docs/hello-world.html

Hello World – React

 

리액트 - 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리!

 

---

 

JSX란? 

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

JSX는 React의 요소를 생성한다.

 

React에서는 이벤트가 처리되고, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결된다.

별도의 파일에 마크업과 로직을 넣어 분리하는 대신, js와 마크업을 한번에 포함하는 컴포넌트라는 유닛으로 분리한다.

 

const something = ',,,';
const element = <h1>{something}</h1>;

ReactDOM.render(
  element,
  document.getElementyById('root')
)

JSX의 중괄호 {} 에는 JavaScript 표현식을 넣을 수 있다.

 

 

 

 

JSX도 표현식이다!

컴파일이 끝나면 JSX표현식은 일반 JavaScript 함수 호출로 되어 JavaScript 객체로 평가된다.

때문에, if나 for loop 내에서 JSX를 사용하고, 변수에 할당하고, 인수로 받아들여지고, 함수에서 반환할 수 있는 것이다.

function sayHello(user){
  if ( user ) {
    return <h1>Hello {user}</h1>;
  }
  
  return <h1>Hello Stranger</h1>;
}

 

 

 

 

JSX 속성 정의

// 1. 
const element = <div tabIndex="0"></div>;
// 2.
const element = <img src={srcUrl}></img>;

1. 1의 방식으로 문자열 리터럴을 정의 할 수 있다.
2. 중괄호를 사용해 속성에 JS표현식을 삽입할 수도 있다.

🔔  src = {""} 와 같이 중괄호 주변에 따옴표를 입력하지 않는다! 따옴표 또는 중괄호 중 하나만 사용해야한다.

🔔  JSX는 HTML 보다 JS에 가깝기 때문에 React DOM은 HTML 속성 이름 대신 camelCase 속성 명명 규칙을 사용한다! ex) class ⇒ className / tabindex ⇒tabIndex

 

 

 

 

JSX는 주입 공격을 방지한다

const title = response....;
const element = <h1>{title}</h1>;

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링 하기 전에 이스케이프 한다(인코딩한다(?) - 이스케이프 한다의 정의를 제대로 이해 못했다).

애플리케이션에 명시적으로 작성되지 않은 내용은 주입되지 않는다.

모든 항목은 렌더링 되기 전에 문자열로 변환된다.

이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있다.

🔔  XSS(cross-site-scripting) 웹 사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점. ex) 게시판에 글을 등록 → 글의 내용에 악성 스크립트가 포함되어 글의 내용에 접근한 사람의 쿠키 등의 정보가 유출될 수 있다.

 

 

 

 

JSX는 객체를 표현한다.

Babel(현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 사용되는 도구 모음)은 JSX를 React.createElement() 호출로 컴파일한다.

 

아래 두 예시는 동일.

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

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

React.createElement()는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지 검사를 수행하며 다음과 같은 객체를 생성하게 된다.

// 다음의 구조는 단순화 되어 표현된 것
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}

이러한 객체를 React element 라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다.

React 는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는데 사용한다.