JSX란?

정의 

• 자바스크립트를 확장한 문법으로 React Element를 생성한다. 
• React.createElement(component, props, ...children)에 대한 Sugar Syntax이다.

// 컴파일 전
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

// 컴파일 후 
React.createElement(<MyButton>, {color:"blue", shadowSize:2}, "Click Me");

브라우저는 JSX를 해석할 수없으므로, Babel를 사용해서 모든 JSX를 순수 React로 변환해야 한다. 아래 글을 참고하자.

2021.05.21 - [Programming/Frontend] - Babel 정리 (Polyfill 포함)

 

 

특징 

• 배열을 매핑하기

  // map을 사용해서 여러개의 JSX 컴포넌트를 합성할 수 있다. 
  <ul> 
  { menus.map((item, index) => 
    <li key={item.id}>{item.name}</li> ) 
  } 
  </ul>

• 컴포넌트 타입은 동적으로 매핑할 수 있지만, 실행 중에는 설정할 수 없다.

  const components = {
      photo: PhotoStory, 
      video: VideoStory 
  }
  
  function Story(props) {
      // Error : 실행 중에는 타입을 결정할 수 없다.
      return <components[props.photo] story={props.story}/>
  }
  
  // 미리 변수에 할당해서 매핑해야 한다.
  function Story(props) {
      const SpecificStory = components[props.photo];
      return <SpecificStory story={props.story}/>
  }

• 자바스크립트 식, 또는 표현식 : 중괄호 {}로 감싼 코드를 의미한다. 중괄호 안의 식을 평가해서 결괏값을 돌려준다. 즉, 덧셈, 뺄셈이나 함수 호출과 같은 연산이 일어날 수 있다는 의미이다.

  // 값을 출력하는 용도 
  <h1>{this.props.myName}</h1>
  
  // 컴포넌트에 props를 전달하는 용도
  <MyColor border={red} opacity={0.5} visible={false} />