Study/React
Use Multiline JSX in a Component
더 멋진 세상을 꿈꾸는 개발자
2020. 5. 26. 16:29
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')
);