JSX 살펴보기

---

JSX는 무엇인가?

JSX는 JavaScript를 확장한 문법이다. 리액트에서 지원하는 문법 설탕이다. JSX는 템플릿뿐만 아니라 JavaScript의 모든 기능을 포함하고 있다. JSX는 ReactElement를 생성하는데, 렌더링되는 ReactElement에는 로직과 UI가 결부되어 있다. 리액트가 ReactElement에서 UI와 로직의 결부를 포용하기 때문이다. 리액트는 컴포넌트를 통해서 로직의 느슨한 결합을 유도하지만, UI와 로직의 결부 자체는 허용하고 있다. 이러한 특징으로 처리 방식, 시간에 따른 상태 변화에 따라 컴포넌트의 Display가 달라지기도 한다.

즉 특징은 아래와 같다.

• JavaScript 확장한 문법
• 템플릿 언어가 아닌 JavaScript의 모든 기능을 포함하고 있다.
• JSX는 React Element를 생성한다.
• 리액트의 렌더링 로직 자체는 UI와 상태 로직 결부를 포용한다.

---

JSX의 특징 알아보기

JSX는 표현식(Expressions)이다.

JSX는 표현식이다. 컴파일되면 JSX 표현식은 정규 JavaScript 함수 호출로 이루어진다. JSX는 JavaScript 객체로 인식된다. 그렇기 때문에if, for 구문에서 사용되며 변수에 담길 수 있다.
변수에 담는 방식을 사용하면 JSX에서 단순 UI 템플릿과 로직을 분리할 수 있다. 해당 방식을 사용하여 더 읽기 좋은 코드를 작성 할 수 있다.

let content = <p>No data found.</p>;

JSX는 주입 공격을 방지한다.

JSX에 사용자 입력을 삽입하는 것은 안전하다고 평가된다. 모든 값을 렌더링하기 전에 이스케이프하기 때문이다. 이를 통해서 XSS 공격을 방지할 수 있다.

JSX 는 객체를 표현한다.

JSX는 ReactElement 객체를 표현한다. JSX는 앞서 말한 바와 같이 문법 설탕이다. JSX는 React 객체에서 제공하는 두 개의 메소드 호출을 통해서 변환 작업을 거쳐 ReactElement 객체로 변환된다. Babel은 JSX를 React.createElement() 로 호출하여 컴파일한다.,
이전에는 리액트에서 JSX가 사용되는 모든 파일에 import React 문이 존재하였는데, import React 된 파일 기준으로 React가 변환 작업을 수행했기 때문이다. 모던 리액트는 이를 import 하지 않아도 이를 자동으로 지원하고 있다.
JSX를 ReactElement로 만들기 위해 추상화 된 동작은 아래와 같다.

JSX 기본 문법

    return (
    	<div>
    		<h2>This is Title<h2>
    		<Card>{item}</Caad>
    	</div>
    )

내장으로 지원되는 형태

    return React.createElement('div', {}, 
    		React.createElement('h2', {}, 'This is Title')
    		React.createElement(CARD/* custom compoennt */, { items } )		
    	)

createElement의 인자
React에서 지원되는 createElement 객체는 3개의 인자를 받는다.
- 엘리먼트 : HTML 빌트인 엘리먼트
- 설정파일 : 엘리먼트에 설정한 속성값(attributes)
- 컨텐츠 : 엘리먼트 태그(tag)의 열고 닫는 사이에 존재하는 값

---

Reference

공식 문서 : JSX 소개
react-complete-guide 깃허브 : React Basic
개인 노션 정리본