[React] JSX란?

JSX란?

const el = <h1>Hello, JSX</h1>;

위의 태그 문법은 문자열도, HTML도 아닌 JSX(Javascript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다.

JSX는 React element를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다.

React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다.

또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메세지를 표시할 수 있게 해준다.

 

 

JSX 사용

JSX는 공식적인 JS문법이 아니기 때문에 브라우저가 이해할 수 있는 평범한 JS로 변환시킬 방법이 필요하다.

 

* 어떤 프레임워크를 사용해 웹앱을 만들때 가장 중요한 것은 최종결과가 HTML, CSS, JS의 조합이어야 한다.

(그렇지 않으면 브라우저가 이해하지 못한다)

 

 

1. Node.js와 그 외 빌드 툴 등으로 구성된 개발환경을 구축하여 리액트로 개발하는 것

 

장점:

웹개발에서 대표적인 방식

JSX에서 JS로 트랜스 파일됨

여러모듈과 빌드 툴 그리고 그 외 복잡한 웹앱의 관리에 필요한 많은 기능 이용 가능

 

단점:

개발환경세팅시 조금 복잡하고 시간이 걸림

 

2. 런타임 시 브라우저가 JSX를 JS로 자동 변환 하게 해주는 방법

 

장점:

개발 환경 세팅 시간을 절약하고 코드 작성에 더 많이 집중 가능

 

단점: 

브라우저가 매번 JSX를 JS로 변환해야 하는데, 이로 인해 소요되는 시간이 길어지면서 브라우저 성능 저하를 야기 할 수 있다.성능 이슈가 있으므로 실제 웹개발에서는 사용하지 않음. (공부용으로만 추천)

 

 

JSX 변환 과정

JSX는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 자바스크립트 형태로 변환된다.

 

// JSX
const el = (
	<h1 className="greeting">
    	Hello, JSX
    </h1>
);

// JS로 변환된 JSX
const el = React.createElement(
	'h1',
    {className: 'greeting'},
    'Hello, JSX',
);

JSX를 사용하지 않고  React.createElement() 함수를 사용하면 컴포넌트 렌더링을 할 수 있지만, JSX를 사용하는 방식보다 불편하다.

 

ReactDom.render(element, container[, callback])

개발자가 작성한 JSX를 화면에 렌더링 하기 위해서는 ReactDOM.render() 함수를 사용해야한다.

이 함수는 컴포넌트를 페이지에 렌더링 하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.

 

element

JSX로 작성한 화면에 출력할 내용

 

container

첫 번째 인자인 JSX를 렌더링 해서 보여줄 DOM 안의 위치

 

 

 

 

출처

https://velog.io/@gyumin_2/React-JSX%EB%9E%80%EC%A0%95%EC%9D%98-%EC%9E%A5%EC%A0%90-%EB%AC%B8%EB%B2%95-%ED%8A%B9%EC%A7%95-%EB%93%B1