react#5 API를 array.map을 사용한 table

Bootstrap

react-boostrap은 프론트엔드 스타일 시트 라이브러리이다. react.js에서 부트스트랩을 사용시 react-bootstrap을 사용한다. react-bootstrap이 react.js프로젝트에서 모든 부트 스트랩 기능을 제공한다. 

bootstrap install in terminal

cd myProjectFile
npm istall react-bootstrap

index.js에 import bootstrap 

import "bootstrap/dist/css/bootstrap.css";

 

Tables

 

const movies = [
  {
    _id: "5b21ca3eeb7f6fbccd471815",
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 6,
    dailyRentalRate: 2.5,
    publishDate: "2018-01-03T19:04:28.809Z"
  },

import React, { Component } from 'react';
import './App.css';
import {getMovies} from './services/fakeMovieService' //배열안에 든 여러개의 Obj를 import

class App extends Component {
  state = {
    movies: getMovies(), //임포트 한 애를 불러오기
  };

  render(){
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          {this.state.movies.map(m => 
          <tr key={m._id}>
            <td>{m.title}</td>
            <td>{m.genre.name}</td>
            <td>{m.numberInStock}</td>
            <td>{m.dailyRentalRate}</td>
          </tr>
          )}
        </tbody>
      </table>
    );
  } 
}

export default App;