ReactJS 컴포넌트(Components)

이 장에서는 컴포넌트를 조합하여 애플리케이션을 더 쉽게 유지보수하는 방법을 배웁니다. 이 방법은 페이지의 나머지 부분에 영향을 미치지 않고 컴포넌트를 업데이트하고 변경할 수 있게 합니다.

상태가 없는 컴포넌트의 인스턴스

이 예제에서의 첫 번째 컴포넌트는 App입니다. 이 컴포넌트는 Header와 Content의 소유자입니다. 우리는 Header와 Content를 각각 생성하고, 이를 App 컴포넌트의 JSX 트리에 추가하고 있습니다. 애플리케이션 컴포넌트만이 내보내어야 합니다.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<Content/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>Content</h2>
　　　　　　　　　　　　<p>The　content　text!!!</p>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/,　document.getElementById('app'));

위 코드는 다음과 같은 결과를 생성합니다.

상태가 있는 컴포넌트의 인스턴스

Header 컴포넌트는 이전 예제와 같이 추가되었습니다. 이는 상태가 필요하지 않기 때문입니다. table과 tbody 요소를 content 대신 생성합니다. 표시를 사용하여, 이러한 요소에서 데이터 배열의 각 객체에 TableRow를 동적으로 삽입합니다.

EcmaScript 2015좌표표기법(=>)는 오래된 JavaScript 문법보다 깔끔하게 보입니다. 이는 우리가 더 적은 코드行으로 요소를 생성하는 데 도움이 됩니다. 많은 항목을 포함한 목록을 생성할 때 특히 유용합니다.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　constructor()　{　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　
　　　　　　　　　[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":1,
　　　　　　　　　　　　　　　"name":"Foo",
　　　　　　　　　　　　　　　"age":""}20"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":2,
　　　　　　　　　　　　　　　"name":"Bar",
　　　　　　　　　　　　　　　"age":""}30"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":3,
　　　　　　　　　　　　　　　"name":"Baz",
　　　　　　　　　　　　　　　"age":""}40"
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　　　　{this.state.data.map((person,　i)　=>　<TableRow　key　=　{i}　
　　　　　　　　　　　　　　　　　　　　　data　=　{person}　/>)}
　　　　　　　　　　　　　　　</tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　TableRow　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<tr>
　　　　　　　　　　　　<td>{this.props.data.id}</td>
　　　　　　　　　　　　<td>{this.props.data.name}</td>
　　　　　　　　　　　　<td>{this.props.data.age}</td>
　　　　　　　　　</tr>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));

우리는 map() 함수 내에서 key = { i }를 사용했습니다. 이는 React가 전체 목록을 다시 표시하는 대신 필요한 요소만 업데이트하도록 도와줍니다. 많은 동적 생성된 요소들에 대해 이는 큰 성능 향상입니다.