ReactJS-구성 요소

이 장에서는 앱을보다 쉽게 ​​유지 관리 할 수 ​​있도록 구성 요소를 결합하는 방법을 알아 봅니다. 이 접근 방식을 사용하면 페이지의 나머지 부분에 영향을주지 않고 구성 요소를 업데이트하고 변경할 수 있습니다.

Stateless 예

다음 예제의 첫 번째 구성 요소는 App. 이 구성 요소는 다음의 소유자입니다.Header 과 Content. 우리는 만들고 있습니다Header 과 Content 별도로 추가하고 JSX 트리 내부에 추가합니다. App구성 요소. 뿐App 구성 요소를 내 보내야합니다.

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 파일 및 호출 reactDOM.render(). 우리는 이미 환경을 설정하면서 이것을했습니다.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

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

상태 저장 예

이 예에서는 소유자 구성 요소 (App). 그만큼Header구성 요소는 상태가 필요하지 않기 때문에 마지막 예제와 같이 추가됩니다. 콘텐츠 태그 대신table 과 tbody 동적으로 삽입 할 요소 TableRow 모든 개체에 대해 data 정렬.

이전 JavaScript 구문보다 훨씬 깔끔해 보이는 EcmaScript 2015 화살표 구문 (=>)을 사용하고 있음을 알 수 있습니다. 이렇게하면 더 적은 코드 줄로 요소를 만드는 데 도움이됩니다. 항목이 많은 목록을 만들어야 할 때 특히 유용합니다.

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"
            }
         ]
      }
   }
   render() {
      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'));

Note − 우리가 key = {i} inside map()함수. 이렇게하면 React가 무언가 변경 될 때 전체 목록을 다시 렌더링하는 대신 필요한 요소 만 업데이트하는 데 도움이됩니다. 더 많은 수의 동적으로 생성 된 요소에 대한 엄청난 성능 향상입니다.