리액트 #04 - Components

React JS #04 - Components 

---

리액트는 컴포넌트로 시작해서 컴포넌트로 끝난다고 해도 과언이 아니다.

이번 포스트에서는 리액트의 컴포턴트에 대해서 예시를 통해 알아보자.

Stateless Example

---

처음에는 State가 없는 컴포넌트를 만들어보자.

우선 컴포넌트는 컴포넌트들끼리 참조가 가능하다.

다음과 같이 App.js를 수정해보자.

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;

- 실행 결과

App 이라는 컴포넌트는 Header와 Content 컴포넌트들을 참조해서, 

Header와 Content를 사용하고 있다.

Stateful Example

---

App에 state를 설정하고 이 데이터를 하위 컴포넌트에 전달해보자.

App.js

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;

- 실행 결과