다시 React! -2 JSX

-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을 구성하고 최신 상태로 유지하는 데 사용합니다.