[REACT] 리액트 기초 프로젝트 - 테이블 만들기

우린 이런 멋진 테이블을 만들기 위해 Material-ui 이란 라이브러리를 사용하여 간편하게 만들 예정이에요.

 

Part 1: React 설치

 

 이건 앞에 설명하여 링크를 통해 참조하시면 돼요.

https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

[REACT] 리엑트 설치하기

 

Part 2: React 실행

 

 npm start 명령어를 통해 실행하시면 아래와 같은 화면이 표시됩니다.

리엑트 실행 화면

 

Part 3 : Text Editor 사용하기

 

텍스트 에디터는 여러 가지가 있는데 "Visual Studio Code", "Atom", "Sublime Text" 이거 3개를 가장 많이 사용해서 편하신 코딩 에디터를 선택하시면 됩니다.

저는 Visual Studio Code를 사용해서 코딩을 진행하도록 할게요.

Visual Studio Code 화면

Part 4: 라이브러리 설치하기

 

 테이블을 만들기 위해서는 Material-ui 라이브러리를 설치해 주셔야 합니다.

 설치 방법은 어렵지 않아요~  

 npm or yarn으로 설치 2개 중 한 가지 선택해서 명령어 복사해서 설치하시면 됩니다. 

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

 

Part 5: Code 세팅하기

 

 App.js 파일 내에 존재하는 div 안에 내용을 지워주고 깨끗한 화면에서 다시 시작할게요.

 코드가 지워지면 하얀색 백지 화면으로 나옵니다.

 

테이블 생성을 위해 src 폴더 내에 MaterialTable.js 파일 생성을 하고 코드를 붙여 넣을게요.

import React from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

const useStyles = makeStyles({
  table: {
    minWidth: 700,
  },
});

export default function CustomizedTables() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
            <StyledTableCell align="right">Calories</StyledTableCell>
            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow key={row.name}>
              <StyledTableCell component="th" scope="row">
                {row.name}
              </StyledTableCell>
              <StyledTableCell align="right">{row.calories}</StyledTableCell>
              <StyledTableCell align="right">{row.fat}</StyledTableCell>
              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
              <StyledTableCell align="right">{row.protein}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

짜잔! 이런 화면이 나오게 되겠죠.

하지만 이걸 생성해도 아무 화면이 뜨지 않을 거예요~~

왜냐하면 우린 파일을 Import 하지 않았기 때문이에요.

 

App.js 에 코드를 추가해 보죠.

import logo from './logo.svg';
import './App.css';
import MaterialTable from './MaterialTable'

function App() {
  return (
    <div className="App">
      <MaterialTable />
    </div>
  );
}

export default App;

Material ui Table View

이렇게 코드를 작성해 주시면 아까 우리가 작성한 테이블을 불러오게 됩니다.

 

이제 완료되었네요.

 

수고 많으셨어요~~