React
JSX

비고

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

const element = <h1>Hello, world!</h1>;

JSX의 소품

JSX에서 소품을 지정하는 여러 가지 방법이 있습니다.

JavaScript 표현식

임의의 자바 스크립트 표현식 을 {} 로 둘러싼 소품으로 전달할 수 있습니다. 예를 들어,이 JSX에서는 :

<MyComponent count={1 + 2 + 3 + 4} />

MyComponent 내부에서 1 + 2 + 3 + 4 표현식이 평가되기 때문에 props.count 의 값은 10 이됩니다.

if 문과 for 루프가 JavaScript의 표현식이 아니므로 JSX에서 직접 사용할 수 없습니다.

문자열 리터럴

물론, string literal 을 prop 으로 만 전달할 수도 있습니다. 이 두 가지 JSX 표현식은 동일합니다.

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

문자열 리터럴을 전달하면 해당 값은 HTML 이스케이프 처리되지 않은 것입니다. 따라서이 두 JSX 표현식은 동일합니다.

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

이 동작은 대개 관련이 없습니다. 완전성을 위해 언급 된 것입니다.

소품 기본값

소품에 값을 전달하지 않으면 기본적으로 true 됩니다. 이 두 가지 JSX 표현식은 동일합니다.

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

그러나 React 팀은 이 접근 방식을 사용 하는 문서에서는 {foo: true} 아닌 {foo: foo} 줄임말 인 ES6 객체 속기 {foo} 와 혼동 될 수 있으므로 권장하지 않습니다 . 그들은이 행동이 HTML의 행동과 일치하도록 바로 거기에 있다고 말한다.

스프레드 특성

이미 개체로 소품을 가지고, 당신은 JSX에 전달하려는 경우, 당신은 사용할 수 있습니다 ... 스프레드 연산자로 전체 소품 객체를 전달합니다. 이 두 구성 요소는 동일합니다.

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}

JSX의 어린이

시작 태그와 닫기 태그를 모두 포함하는 JSX 표현식에서 이러한 태그 사이의 내용은 특별한 prop : props.children 으로 전달됩니다. 아이들을 데려 오는 방법에는 여러 가지가 있습니다.

문자열 리터럴

시작 태그와 닫기 태그 사이에 문자열을 넣을 수 있으며 props.children 은 그 문자열 props.children 입니다. 이것은 많은 내장 HTML 요소에 유용합니다. 예 :

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

유효한 JSX이며 MyComponent의 props.children 은 <h1>Hello world!</h1> 입니다.

HTML은 이스케이프 처리되지 않으므로 HTML을 작성하는 것처럼 JSX를 작성할 수 있습니다.

이 경우 JSX를 염두에 두십시오.

• 행의 처음과 끝에서 공백을 제거합니다.
• 빈 줄을 제거합니다.
• 태그에 인접한 새로운 행은 제거됩니다.
• 문자열 리터럴의 중간에 나오는 새로운 줄은 하나의 공간으로 압축됩니다.

JSX 어린이

더 많은 JSX 요소를 자식으로 제공 할 수 있습니다. 중첩 된 구성 요소를 표시 할 때 유용합니다.

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

서로 다른 유형의 자식을 함께 섞을 수 있으므로 JSX 자식과 함께 문자열 리터럴을 사용할 수 있습니다 . 이것은 JSX가 HTML과 같은 또 다른 방법이기 때문에 유효한 JSX와 유효한 HTML입니다.

<div>
  <h2>Here is a list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

React 구성 요소 는 여러 개의 React 요소를 반환 할 수 없지만 단일 JSX 식은 여러 개의 자식을 가질 수 있습니다 . 따라서 여러 요소를 렌더링하는 구성 요소를 원하면 위의 예제와 같이 div 래핑 할 수 있습니다.

JavaScript 표현식

자바 스크립트 표현식을 {} 내에 포함시켜 어린이로 전달할 수 있습니다. 예를 들어, 다음 표현식은 동일합니다.

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

이것은 종종 임의 길이의 JSX 표현식 목록을 렌더링 할 때 유용합니다. 예를 들어, 다음과 같이 HTML 목록을 렌더링합니다.

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

JavaScript 표현식은 다른 유형의 자식과 혼합 될 수 있습니다.

어린이로서의 기능

일반적으로 JSX에 삽입 된 JavaScript 표현식은 문자열, React 요소 또는 그 목록을 평가합니다. 그러나 props.children 은 React가 렌더링하는 방법을 아는 것뿐만 아니라 모든 종류의 데이터를 전달할 수 있다는 점에서 다른 소품과 마찬가지로 작동합니다. 예를 들어 사용자 정의 구성 요소가있는 경우 props.children 과 같은 콜백을 props.children .

const ListOfTenThings = () => (
  <Repeat numTimes={10}>
    {(index) => <div key={index}>This is item {index} in the list</div>}
  </Repeat>
);

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

사용자 지정 구성 요소에 전달 된 애들은 해당 구성 요소가 렌더링 전에 이해할 수있는 것으로 변환되는 한 아무거나 될 수 있습니다. 이 사용법은 일반적인 것은 아니지만 JSX가 수행 할 수있는 작업을 확장하려는 경우에 효과적입니다.

무시 된 값

false , null , undefined 및 true 는 유효한 자식입니다. 그러나 그들은 단순히 렌더링하지 않습니다. 이 JSX 표현식은 모두 같은 것으로 렌더링됩니다.

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

이는 React 요소를 조건부로 렌더링하는 데 매우 유용합니다. 이 JSX는 showHeader 가 true 인 경우에만 a를 렌더링합니다.

<div>
  {showHeader && <Header />}
  <Content />
</div>

하나의 중요한주의 사항은 0 숫자와 같은 일부 "위조 된"값은 여전히 ​​React에 의해 렌더링된다는 것입니다. 예를 들어,이 코드는 예상대로 동작하지 않습니다. 왜냐하면 props.messages 가 빈 배열 일 때 0 이 인쇄되기 때문입니다.

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

이 문제를 해결하기위한 한 가지 방법은 && 앞에있는 표현식이 항상 부울인지 확인하는 것입니다.

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

마지막으로 출력에 false , true , null 또는 undefined 와 같은 값을 표시하려면 먼저 문자열로 변환해야합니다.

<div>
  My JavaScript variable is {String(myVariable)}.
</div>