Joon 개발노트

JSX

October 11, 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