JSX

February 27, 2020

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 한다

© 2023, Customized by Joon