[React공식문서읽기] JSX이해하기

JSX는 React.createElement(component, props, ...children)함수에 대한 문법적 설탕을 제공할 뿐이다.

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

위의 코드는 아래와 같이 컴파일 된다.

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

JSX태그의 첫 부분은 React element의 타입을 결정한다.

대문자로 시작하는 JSX태그는 React컴포넌트를 지정한다. 

JSX는 React.createElement를 호출하는 코드로 컴파일 되기 때문에 React 라이브러리 역시 JSX 코드와 같은 스코프 내에 존재해야 된다.

 

JSX타입을 위한 점 표기법

JSX 내에서도 점 표기법을 사용하여 React컴포넌트를 참조할 수 있다.

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

사용자 정의 컴포넌트는 반드시 대문자로 시작해야 된다.

Element가 소문자로 시작하는 경우에는 <div>나 <span>과 같은 내장 컴포넌트라는 것을 의미하고, div나 span과 같은 문자열 형태로 React.createElement에 전달된다.

<Component1/> 과 같이 대문자로 시작하는 타입은 React.createElement(Foo)의 형태로 컴파일 되며 Javascript 파일 내 사용자가 정의 했거나 import 한 컴포넌트를 가리킨다.

이렇기 때문에 컴포넌트의 이름은 대문자로 시작하도록 만들고, 소문자로 시작하는 컴포넌트를 만들어야 할 경우에는 대문자로 시작하는 변수에 할당한 뒤 JSX에서 이 변수를 사용해라.

실행 중 타입 선택하기

React element타입에 일반적인 표현식은 사용할 수 없다.

만약 element타입을 지정할 때 일반적인 표현식을 사용하고자 한다면 대문자로 시작하는 변수에 배정한 후 사용할 수 있다. 

JSX안에서 props사용

Javascript표현을 {}안에 넣어서 JSX안에서 props으로 사용할 수 있다.

다만 if구문이나 for 반복문은 javascript표현식이 아니므로 JSX내에서 그대로 사용할 수 없다.

다만 JSX밖에서 element나 컴포넌트를 return해주는 방식으로 사용할 수 있다.

문자열 리터럴

문자열 리터럴은 props로 넘겨줄 수 있다.

//동일한 표현이다.
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

//html이스케이프가 처리되지 않고 아래의 JSX표현은 동일한 표현이다.
<MyComponent message="&lt;3" />
<MyComponent message={'<3'} />

Props의 기본값은 True

Prop에 어떤 값도 넘기지 않을 경우, 기본값은 true이다.

//동일한 표현이다.
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

속성 펼치기

props에 해당하는 object를 이미 가지고 있다면 전개 연산자를 이용하여 전체 객체를 그대로 넘겨줄 수 있다.

//App1과 App2는 동일한 표현이다.
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

JSX에서 자식 다루기

여닫는 태그가 있는 JSX표현에서 두 태그 사이의 내용은 props.children이라는 특수한 props로 넘겨진다.

자식을 넘기는 방법은 여러가지가 있다.

문자열 리터럴

여는 태그와 닫는 태그 사이에 문자열 리터럴을 넣을 수 있고 이때 props.children은 그 문자열이 된다.

<MyComponent>Hello world</MyComponent>

여기서 props.children은 Hello world이다.

JSX는 html과 같이 이스케이프 처리가 되지 않는다.

각 줄의 처음과 끝의 공백, 빈줄, 태그에 붙어있는 개행, 문자열 중간의 개행은 한개의 공백으로 대체된다.

JSX를 자식으로 사용하기

JSX element를 자식으로 넘겨 줄 수 있다. 이는 중첩된 컴포넌트를 보여줄 때 유용하다.

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

다양한 타입의 자식들을 섞어서 사용할 수 있다. 따라서 문자열 리터럴을 JSX 자식과 함께 사용할 수 있다.

JSX를 HTML과 같은 방식으로 구동되는 점 중 하나이다.

 

React 컴포넌트는 element로 이루어진 배열을 반환 할 수 잇다,

render() {
  return [
    // key 지정은 필수이다.
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Javascript 표현식을 자식으로 사용하기

{}로 감싸서 Javascript 표현식도 자식으로 넘길 수 있다.

//동일한 표현이다.
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

 

Javascript 표현식은 다른 타입의 자식과 같이 쓸수 있다.

function Hello(props) {
  return <div>Hello {props.addressee}</div>;
}

함수를 자식으로 사용하기

보통 JSX에 삽입된 Javascript표현식은 문자열, React  element 혹은 이들의 배열로 환산된다. 하지만 props.children은 다른 props와 마찬가지로 React가 rendering할 수 있는 데이터의 형태 뿐 아니라 다른 형태의 데이터도 넘겨질 수 있다.

// 자식 콜백인 numTimes를 호출하여 컴포넌트를 반복 생성
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      //Key는 필수다
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

 

 

직접 만든 컴포넌트에 넘겨지는 children은 rendering되기 전 React가 이해할 수 있는 형태로 변환 된다면 어떤것도 넘겨질 수 있다.

 

boolean null undefined는 무시된다

false, true, null, undefined는 유효한 자식이며 그저 rendreing되지 않을 뿐이다.

rendering하고 싶으면 문자열로 casting해야 된다.

주의할 점은 0과 같은 falcy값은 Rendering한다.