Jun 개발노트

JSX

2020-10-11

What is JSX?

  1. JavsScript XML(Extensible Markup Language)의 약자
  2. React에 제공하는 Syntax Sugar
    • Syntax Sugar 언어 차원에서 지원하는 단축표현
    • 예) class, !!, &&, ||, >>, <<, >>>
  3. HTML을 쉽게 작성할 수 있다.
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

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

특징

  1. 대문자로 컴포넌트를 표현한다.

  2. Static(Lexical) Scope다.

    React.createElement(
      MyButton,
      {color: 'blue', shadowSize: 2},
      'Click Me'
    )
    
  3. Dot Notiation(점 표기법)으로 하나의 컴포넌트를 export시켜 여러개의 컴포너트로 사용가능

    import React from 'react';
    
    const MyComponents = {
      DatePicker1: function DatePicker1(props) {
        return <div>11111111111111111</div>;
      },
      DatePicker2: function DatePicker2(props) {
        return <div>22222222222222222</div>;
      }
    }
    
    function BlueDatePicker() {
      return <MyComponents.DatePicker color="blue" />;
    }
    
  4. JSX tag는 표현식을 사용 할 수 없다.

    • 대문자로 시작하는 변수에 할당해 사용은 가능
    import React from 'react';
    import { PhotoStory, VideoStory } from './stories';
    
    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // Wrong! JSX type can't be an expression.
      return <components[props.storyType] story={props.story} />;
    }
    
    function Story(props) {
      // Correct! JSX type can be a capitalized variable.
      const SpecificStory = components[props.storyType];
      return <SpecificStory story={props.story} />;
    }
    

Props in JSX

  1. 표현식 사용가능(계산 결과가 값의 형태로 변환), 문은 불가능

    <MyComponent 
    	foo={1 + 2 + 3 + 4}
    	bar={1 && 2 && false}
    	hello={1 ? '1이다' : '2이다'}
      />
    
    // 결국 description의 값
    function NumberDescriber(props) {
      let description;
      if (props.number % 2 == 0) {
        description = <strong>even</strong>;
      } else {
        description = <i>odd</i>;
      }
      return <div>{props.number} is an {description} number</div>;
    }
    
  2. props로 문자열을 넘길때는 HTML 이스케이프 처리가 되지 않는다.

    <MyComponent message="&lt;3" />
    
    <MyComponent message={'<3'} />
    
  3. Props의 default value는 true

    • 단 ES6 object shorthand로 인해 잘못된 props가 전달될수도 있기때문에 추천하지 않는다.
  4. Spread syntax를 활용하여 여러개의 props를 한꺼번에 내릴수 있다.

    • 단점은 불필요한 props도 같이 내리기 때문에 추천하지 않는다.

Children in JSX

  1. 자식으로 HTML 태그나, JSX를 가짐으로써 중첩된 컴포넌트를 구성할 수 있다.

  2. elements로 이루어진 배열을 반환할 수 있습니다.

    render() {
      // 리스트 아이템들을 추가적인 엘리먼트로 둘러쌀 필요 없습니다!
      return [
        // key 지정을 잊지 마세요 :)
        <li key="A">First item</li>,
        <li key="B">Second item</li>,
        <li key="C">Third item</li>,
      ];
    }
    
  3. 직접만든 컴포넌트에 넘겨지는 자식들은 React가 이해할 수 있는 형태로 변환이 된다면, 사용가능

    • 함수또한 값이기 때문 자식으로 사용가능하다
    // 자식 콜백인 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}>
          {(index) => <div key={index}>This is item {index} in the list</div>}
        </Repeat>
      );
    }
    
  4. 표현식 사용가능

  5. boolean, null, undefiend, true는 유효한 자식이지만, redering 되지 않는다.

    • 단, falsy 값 중 0, -0은 0을 rendering 한다