JSX

JSX

React와 ReactNative 둘 다 JSX를 사용한다. (자바스크립트 내에서 element를 쓸 수 있는 syntax)
리액트 문서에는 JSX에 대한 포괄적인 지침이 수록되어 있으므로 참고.
 
JSX는 React 라이브러리에 포함되어 있으므로 import React from 'react' 를 빼먹지 말자.
 

JSX는 사실 React.createElement 함수다.

JSX는 근본적으로 React.createElement(component, props, ...chlidren) 함수의 축약어라고 보면됨.
  • [JSX로 작성한 코드]
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
  • [컴파일 시 React.createElement로 변환됨]
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)
 

JSX 태그는 맨앞 대문자 사용

소문자 태그는 bulit-in 컴포넌트로 참조한다. ( <div> <span> 등 원래 있는 html 태그 )
따라서 커스텀 JSX 태그에는 반드시 맨앞글자는 대문자로 사용해야함. ( <Foo> )
 

JSX에서 자바스크립트 표현식 사용

자바스크립트 변수 참조

JSX는 자바스크립트이기 때문에 그 안에 변수를 사용할 수 있다.
  • {자바스크립트 변수명}
      • : 중괄호 안에 자바스크립트 변수를 써서 element에서 자바스크립트 변수를 참조할 수 있다.
import React from 'react';
import { Text } from 'react-native';

const Cat = () => {
  const name = "Maru";
  return (
    <Text>Hello, I am {name}!</Text>
	//JSX문법으로 자바스크립트 내에 <Text> element를 삽입했고,
	//element에서는 자바스크립트 변수를 중괄호안에 넣어줌으로써 참조할 수 있다. {name}
  );
}

export default Cat;

닷 표기법도 사용 가능

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" />;
}
 

그 외 자바스크립트 표현식도 사용 가능

import React from 'react';
import { Text } from 'react-native';

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + " " + secondName + " " + thirdName;
}

const Cat = () => {
  return (
    <Text>
      Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
			{//JSX 내에서 변수참조 외에도 자바스크립트 표현식도 중괄호 안에서 사용 가능}
    </Text>
  );
}

export default Cat;