Use Multiline JSX in a Component

Use Multiline JSX in a Component

 

이 레슨에서는, 당신은 JSX와 리엑트 컴포넌트를 함께 동작하는 몇가지 일반적인 방법에 대해 배울 것이다. 

당신은  새로운 트릭들을 취하면서 JSX와 컴포넌트들을 다루며 더 편안함을 가질 것이다. 

 

HTML, 코드를 보아라.

<blockquote>
  <p>
    The world is full of objects, more or less interesting; I do not wish to add any more.
  </p>
  <cite>
    <a target="_blank"
      href="https://en.wikipedia.org/wiki/Douglas_Huebler">
      Douglas Huebler
    </a>
  </cite>
</blockquote>

 

어떻게 이 HTML을 렌더하는 리엑트 컴포넌트를 만들 수 있을까?

 

QuoteMaker.js를 선택해라. 

 

QuoteMaker에서 주목할 중요한 것은 line 6과 18에, return문의 ()이다. 

지금까지, 당신의 렌더 함수 return문은 아무 괄호없이 이렇게 보였었다. 

 

return <h1>Hello world</h1>;

 

그러나, 여러줄의 JSX 표현식은 항상 ()괄호로 감싸져야만한다. 

이것이 QuoteMaker의 리턴문이 ()를 가지고 있는 이유이다. 

 

import React from 'react';
import ReactDOM from 'react-dom';

class QuoteMaker extends React.Component {
  render() {
    return (
      <blockquote>
        <p>
          The world is full of objects, more or less interesting; I do not wish to add any more.
        </p>
        <cite>
          <a target="_blank"
            href="https://en.wikipedia.org/wiki/Douglas_Huebler">
            Douglas Huebler
          </a>
        </cite>
      </blockquote>
    );
  }
};

ReactDOM.render(
  <QuoteMaker />,
  document.getElementById('app')
);

 

https://www.codecademy.com/courses/react-101/lessons/react-components-advanced-jsx/exercises/render-multiline-jsx