[React] JSX

in Study on React

블로그 글은 React에서 제공하는 문서를 거의 그대로 참조하고 가져온 것 입니다.

1. JSX 소개

const element = <h1>Hello world!</h1>
  • 위와 같은 태그 문법은 JSX이며, Javascript를 확장한 문법.
  • JSX는 React 엘리먼트(element)를 생성.

2. JSX란?

  • JSX
    • Javascript XML
    • 컴포넌트의 렌더링 구조를 지정하는 방법을 제공해줌
  • React는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 수용.
    - 기존 기반 기술 : 마크업과 로직의 분리
    - React : 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리(JS에 마크업을 넣어 마크업과 로직 모두를 포함)
  • React에서 JSX가 필수는 아님

3. JSX에 표현식 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>

ReactDOM.render(
	element,
	document.getElementById('root')
);
  • JSX의 중괄호 : Javascript 표현식을 모두 넣을 수 있음

4. JSX도 표현식

function getGreeting(user){
	if(user){
		return <h1>Hello, {formatName(user)}!</h1>;
	}
	return <h1>Hello, Stranger..</h1>
}
  • 컴파일 후, JSX 표현식이 정규 Javascript 함수 호출이 되고 Javascript 객체로 인식됨.
  • JSX를 if 및 for 문 안에서 사용할 수 있고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있음.

5. JSX 속성정의

  • 속성에 따옴표를 이용해 문자열 리터럴 정의 가능
    const element = <div tabIndex="0"></div>
  • 중괄호를 사용해 attribute에 Javascript 표현식 삽입 가능
    const element = <img src={user.avatarUrl}></img>
  • attribute에 Javascript 표현식 삽입 시
    • 중괄호 주변에 따옴표 입력 No!
    • 따옴표 또는 중괄호 중 하나만 사용
    • 동일한 attribute에 두 가지 동시 사용 No!!!
JSX는 HTML보다는 Javascript에 가깝기 때문에,
React DOM은 HTML 어트리뷰트 이름 대신
camelCase 프로퍼티 명명 규칙을 사용

E.G) JSX에서 `class`는 `className`이 되고
`tabindex`는 `tabIndex`가 됨

6. JSX로 자식정의

const element = (
	<div>
		<h1>Hello</h1>
		<h2>Good to see you here</h2>
	</div>
);
  • JSX 태그는 자식 포함 가능

7. JSX는 주입 공격을 방지

  • JSX에 사용자 입력을 삽입하는 것은 안전
     const title = response.potentiallyMaliciousInput;
 //이것은 안전합니다
 const element = <h1>{title}</h1>;
  • React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않음. 모든 항목은 렌더링 되기 전에 문자열로 변환됨.
  • 이런 특성으로 인해 XSS(cross-site-scripting) 공격 방지 가능

8. JSX는 객체를 표현함

  • Babel은 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 엘리먼트라 하며, 이를 화면에 표시하려는 항목에 대한 설명이라고 생각할 수 있음.
  • React는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용

Reference: