-JSX란?
-JavaScript를 확장한 문법입니다.
-자바스크립트의 모든 기능이 포함되어 있습니다.
-JSX는 React “엘리먼트(element)” 를 생성합니다.
-why JSX?
React는 별도의 파일에 마크업과 로직을 넣어 기술 을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리 합니다.
-JSX에 표현식 포함하기
import React from 'react';
import ReactDOM from 'react-dom';
const user = {
firstName : "kyuchan",
lastName : "moon"
}
// 객체를 만들어주고
function formatName(user){
return user.firstName + " " + user.lastName
}
//함수에서 객체 활용
const element = <h1> Hi! , {formatName(user)} </h1>
//중괄호로 함수 사용
ReactDOM.render(
element,
document.getElementById('root')
);
결과물 ⬇️⬇️⬇️
-JSX is an Expression Too
컴파일이 끝나면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식됩니다.
이 말은 if 문이나 for 반복 내에서 JSX를 사용할 수 있으며, 변수에 할당하거나 매개 변수로 전달하거나 함수에서 반환할 수 있음을 의미합니다.
-JSX는 객체를 표현합니다.
다음 두 예시는 동일하다
const element = (
<h1> className = "greeting">
hello world!
</h1>
);const element = {
type : "h1",
props : {
className : "greeting",
children : "hello wolrd!"
}
};babel은 JSX는 React.createElement()를 호출하여 컴파일합니다.
2번과 같은 객체를 React엘리먼트 라고하며 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 됩니다.
React는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는 데 사용합니다.
Hi