JSX는 `React.createElement(component, props, ...children)함수에 문법적 설탕이다.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

바벨로 컴파일하면

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

React Element 타입 지정하기

JSX태그의 첫 부분은 React element의 타입을 결정한다. 이 태그들은 같은 이름을 가진 변수를 직접 참조한다.

React가 스코프 내에 존재해야 한다.

JSX는 React.createElement를 호출하는 코드로 컴파일 되기 때문에 React 라이브러리 영ㄱ시 JSX 코드와 같은 스코프 내에 있어야 한다.

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
	return <CustomButton color="red" />;
}

JSX 타입을 위한 점 표기법 사용

import React from 'react';

const MyComponents = {
	DatePicker: function DatePicker(props) {
		return <div>Imagine a {props.color} datepicker here.</div>;
	}
}

function BlueDatePicker() {
	return <MyComponents.DatePicker color="blue" />
}

하나의 모듈에서 복수의 React 컴포넌트를 export 하는 경우 사용.

대문자로 시작하자

실행 중에 타입 선택하기

React Element 타입에 일반적인 표현식은 사용할 수 없다. 특히 대문자를 통한 프로퍼티 접근해야할 경우 따로 변수를 정해서 할당해야 한다.

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
	// 올바르게 표현하려면 대문자로 할당.
	const SpecificStory = components[props.storyType];
	return <SpecificStory story={props.story} />;
}

JSX안에서 prop 사용

javascript Expressions as Props