[ React ] 리액트 Material UI 사용해보기

 

 

 

Material-UI 란 리액트 개발에서 쉽게 사용할 수 있는 UI Framwork 이다.

 

엘리먼트들의 디자인부터 아이콘까지, 다양한 디자인에 대해 집중되어져있다.

 

이번 포스팅은 전 포스팅의 프로젝트에 Material Ui 를 적용해 보다 맛깔나게 만들어 보도록 하자.

 

 

먼저 Material Ui 를 설치해야한다.

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

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

 

사용법은 너무나도 간단하다. 

 

import 하고 그냥 사용하던 커스텀 마이징해서 사용하면 된다.

 

본 포스팅은 커스텀 마이징은 귀찮아서 하지 않았당 ㅎ.

 

 

 

 

먼저 가장 초기에 아무 style 이 걸려있지 않은 실행 화면은 다음과 같았다.

 

너무 못 생겼다.

 

버튼에 부트스트랩을 이용해 색이라도 줘봤다.

 

여전히 못 생겼다.

 

자, 이제 Material-UI 를 이용해 보다 이쁘게 만들어 보도록 하자.

 

 

먼저 입력 폼의 제목과 내용부터 바꿔보자.

 

기존의 소스는 아래와 같다.

import React from 'react';
import { Button } from 'react-bootstrap';
.
.
.

function BoardNew({ changeInput, inputData, onSaveButtonClick, resetForm, onSearchButtonClick }) {

    .
    .
    .
    return (
        <div>
            <form onSubmit={handleSubmit(saveBtnClick)}>
                <h3></h3>
                <div align='center'>
                    <div>
                        제목: <input name="boardTitle" ref={register({required: true})} onChange={changeInput} value={inputData.boardTitle} />
                    </div>
                    &nbsp;
                    <div>
                        내용: <input variant='outlined' label='글내용' name="boardContent" ref={register({required: true, minLength: 5})} onChange={changeInput} value={inputData.boardContent} />
                    </div>
                </div>
                .
                .
                .
            </form>
        </div>
    )
};

export default BoardNew;

 

 

Material-UI 의 TextField 를 쓰기 위해 아래와 같이 import 한다.

import TextField from '@material-ui/core/TextField';

 

 

아래처럼 input 을 TextField 로 바꿔준다.

<div align='center'>
    <div>
        <TextField id='boardTitle' label='글제목' name='boardTitle' inputRef={register({required: true})} onChange={changeInput} value={inputData.boardTitle} />
    </div>
    &nbsp;
    <div>
        <TextField id='boardTitle' label='글제목' name='boardTitle' inputRef={register({required: true})} onChange={changeInput} value={inputData.boardTitle} />
    </div>
</div>

 

이전의 input 과 차이점으로는 ref 가 아니라 inputRef 를 이용해 register 를 참조했고,

 

보기싫은 라벨 "제목: " 과 "내용: " 을 제거하고 label 을 사용했다.

 

코드에는 없지만 조회 버튼과 저장 버튼도 div 로 묶어 align='center' 를 주었다.

 

그 결과 아래같이 input style 이 바뀌었다.

 

글제목과 글내용에 값을 입력하면?

 

label 도 보다 깔끔해진걸 알 수 있다. ( 물론 제 취향 기준입니다 )

 

TextField 는 이 외에도 여러 속성을 가지고 있고, 이는 검색해보면 주루룩나오니 필요에 따라 찾아보자.

 

 

다음은 데이터를 뿌려주는 테이블 부분을 수정해보자.

 

먼저 테이블의 헤더와 틀을 담당하던 Container.js 의 코드중 테이블 부분은 아래와 같았다.

<div>
    <div>
        <table border='1'>
            <tbody>
                <tr align="center">
                    <td width="50">번호</td>
                    <td width="100">제목</td>
                    <td width="200">내용</td>
                </tr>
                {boards.length > 0 && boards.map(row =>
                    <BoardList
                        key={row.boardId}
                        id={row.id}
                        boardId={row.boardId}
                        boardTitle={row.boardTitle}
                        boardContent={row.boardContent}
                        onRowClick={onRowClick}
                        onRemoveButtonClick={onRemoveButtonClick}
                    />
                )}
            </tbody>
        </table>
    </div>
    .
    .
    .
</div>

 

 

이번엔 Material-UI 의 Table 관련 기능을 사용할 것이기에 아래와 같이 import 해주자.

import Table     from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow  from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';

 

 

물론 아래와 같이 해도 똑같은 목적의 import 이다.

import { Table, TableHead, TableBody, TableRow, TableCell } from '@material-ui/core';

 

 

위에서 보여준 table 부분을 아래와 같이 수정한다.

<div>
    <div>
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell align='center' color='red'>번호</TableCell>
                    <TableCell align='center'>제목</TableCell>
                    <TableCell align='center'>내용</TableCell>
                    <TableCell align='center'>글삭제</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {boards.length > 0 && boards.map(row =>
                    <BoardList
                        key={row.boardId}
                        id={row.id}
                        boardId={row.boardId}
                        boardTitle={row.boardTitle}
                        boardContent={row.boardContent}
                        onRowClick={onRowClick}
                        onRemoveButtonClick={onRemoveButtonClick}
                    />
                )}
            </TableBody>
        </Table>
    </div>
    .
    .
    .
</div>

 

각 기능은 기존의 table 태그 내의 속성들과 거의 일치하니 눈으로만 봐도 이해가 될 것이다.

 

현재 이 코드에서 TableBody ( tBody ) 에 BoardList 컴포넌트를 렌더링하는걸 보니,

 

이전 포스팅을 보지 않아도 BoardList 에 Table 의 몸통이 들어있겠다 예상이 가능하다.

 

다를 건 없고 BoardList 또한 현 코드처럼 TableRow 와 TableCell 을 사용하면 된다.

 

BoardList 에서 뿌려줄 Table 몸통 부분은 아래와 같다.

<TableRow>
    <TableCell align='center' onClick={() => onRowClick(id, boardId, boardTitle, boardContent)}>{boardId}</TableCell>
    <TableCell align='center' onClick={() => onRowClick(id, boardId, boardTitle, boardContent)}>{boardTitle}</TableCell>
    <TableCell align='center' onClick={() => onRowClick(id, boardId, boardTitle, boardContent)}>{boardContent}</TableCell>
    <TableCell align='center'><Button onClick={() => onRemoveButtonClick(id)}>삭제</Button></TableCell>
</TableRow>

 

 

실행 화면

 

이제서야 좀 봐줄만하게 생긴 것 같다.

 

 

여기서 다룬 것들은 공부하는 과정에서 기초적인 부분만 다루었을 뿐이고,

 

워낙 Material-UI 는 잘 알려져있다보니 조금만 검색해도 자료가 많이 나온다.

 

참고해가며 새로운 디자인도 추가해보면 좋을 것 같다.