JSX란?
JSX (JavaScript XML) 는 Javascript를 확장한 문법이라 JS의 모든 기능이 들어있어요.
JSX는 React 엘리먼트를 생성해요.
리액트에서 UI가 어떻게 보여야하는지 묘사할 때 사용합니다.
const name = 'Josh Perez';
// 오~ 이렇게 직접 태그를 쓸 수 있군요!
const element1 = <h1>Hello, {name}</h1>;
const element2 = <a href="https://www.reactjs.org"> link </a>;👇 리액트의 기본 코드를 따라가보면서 사고를 넓혀봅시다. 👇
(1) 코드 고찰
import React from 'react';
import ReactDOM from 'react-dom' // 1) react-dom이 뭐죠?
const element = <h1>Hello, world!</h1>;
// 2) render가 하는 일?
// 3) root를 왜 지정해두죠?
ReactDOM.render(element, document.getElementById('root')); 1) react-dom이란?
-
패키지입니다.
-
앱의 최상위 레벨에서 사용할 수 있는
DOM에 특화된 메서드들을 제공해요. 👉 위 코드에서 볼 수 있듯이 .render() 같은 메서드를 제공해요. -
React 모델 외부로 나갈 수 있는 방법을 제공해요.
2) render가 하는 일
import ReactDOM from 'react-dom'
ReactDOM.render(element, container[, callback])React 엘리먼트(1번째 인자)를 container(2번째 인자)에 렌더링해요.
반환값: 컴포넌트에 대한 참조 (stateless component는 null을 반환)
3) root를 미리 선언해놓는 이유
⚠️ 주관적인 생각입니다!
-
컴포넌트에서 JSX를 반환할 때
<Fragment>를 사용해서라도 단일 태그를 사용하는데요, #root를 그런 이유때문에 사용하지 않을까요? -
VirtualDOM의 최적화와 관련이 되어있다고 들어본 것 같아요. (단일 태그로 트리 구성이 되어야 비교 연산 속도가 빠르게 구성되어 있다고 알고 있습니다.)
(2) 코드 고찰
import React from 'react';
import ReactDOM from 'react-dom'
// 1) React.createElement가 뭐죠?
// 2) JSX -> JS 관점
const element = React.createElement(
'h1',
'Hello, world!'
);
ReactDOM.render(element, document.getElementById('root'));1) document.createElement vs React.createElement
document.createElement는 DOM element를 반환해요.
React.createElement는 DOM element를 표현하는 객체를 반환해요.
❓ 왜 객체를 반환할까요
- React는 VirtualDOM이 동작하는데 객체를 반환해야 리액트가 성능 최적화를 하는 것을 허용해주기 때문입니다.
const element = React.createElement("h1");
// 객체를 반환합니다.
console.log(element);
👇
{
type: 'h1',
props: {}
}
2) JSX와 React.createElement 는 무슨 관계일까요?
Babel은 JSX를 React.createElement() 호출을 통해 컴파일해요.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// 👇 이렇게 변환되어요.
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);📖 결론적으로 JSX는 React.createElement(component, props, ...children)함수에 대한 문법적 설탕을 제공한다고 볼 수 있겠네요!
3) JSX와 표현식(Expression)은 같은걸까?
✋ 잠깐, 표현식이란?
표현식이란 값을 반환하는 식 또는 코드입니다.
- 변수에 값을 할당하는 표현식 eg) x = 7
- 평가하여 값으로 해석되는 표현식 eg) 3 + 4
컴파일이 끝나면 JSX 표현식이 정규 JavaScript로 함수 호출이 되고 JavaScript 객체로 인식됩니다.
⚠️주관적 생각입니다!
JSX를 if문, for문 안에서 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있어요.
그래서 저는 JSX를 표현식이라고 생각할 수 있을 것 같아요.
