리액트 개발환경은 세팅했으니 이제 게시판 UI를 만들어보자.
게시판은 목록 조회, 글쓰기, 상세 조회, 수정하기, 삭제하기 기능만 만들고, 중간 상태 점검을 한 후에 추가 기능을 구현하겠다.
먼저, react-bootstrap에서 제공하는 컴포넌트를 사용하여 UI를 만들어보자.
react-bootstrap 설치
npm i react-bootstrap bootstrap
기본 bootstrap은 필수 설치 요소는 아니지만, Bootstrap Sass 파일을 사용자 정의할 계획이거나 스타일시트에 CDN을 사용하지 않으려면 기본 bootstrap도 설치하는 것이 도움이 될 수 있다.
App.tsx에 bootstrap css 추가
App.tsx 파일 상단에 아래 코드를 추가한다.
import 'bootstrap/dist/css/bootstrap.min.css';
목록 조회 컴포넌트 생성
1. src 폴더 내에 BoardList.tsx 파일을 생성하고, 아래 코드를 입력한다.
import { Component } from "react";
import Table from "react-bootstrap/Table";
/**
* BoardList class
*/
class BoardList extends Component {
/**
* @return {Component} Component
*/
render() {
return (
<Table striped bordered hover>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>게시글1</td>
<td>artistJay</td>
<td>2022-03-19</td>
</tr>
<tr>
<td>2</td>
<td>게시글2</td>
<td>artistJay</td>
<td>2022-03-19</td>
</tr>
<tr>
<td>3</td>
<td>게시글2</td>
<td>artistJay</td>
<td>2022-03-19</td>
</tr>
</tbody>
</Table>
);
}
}
export default BoardList;
2. App.tsx 파일 상단에 아래 코드를 추가한다.
import BoardList from 'BoardList';
3. App.tsx 파일의 return 부분에 방금 만든 컴포넌트를 추가한다.
function App() {
return (
<div className="App">
<BoardList></BoardList>
</div>
);
}
4. 화면에 테이블이 잘 보이는 지 확인
5. 목록에 checkbox와 '글쓰기', '수정하기', '삭제하기' 버튼을 추가하기 위해 BoardList.tsx 파일을 수정한다.
import { Component } from "react";
import Table from "react-bootstrap/Table";
import Button from "react-bootstrap/Button";
/**
* BoardList class
*/
class BoardList extends Component {
/**
* @return {Component} Component
*/
render() {
return (
<div>
<Table striped bordered hover>
<thead>
<tr>
<th>선택</th>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>1</td>
<td>게시글1</td>
<td>artistJay</td>
<td>2022-03-19</td>
</tr>
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>2</td>
<td>게시글2</td>
<td>artistJay</td>
<td>2022-03-19</td>
</tr>
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>3</td>
<td>게시글2</td>
<td>artistJay</td>
<td>2022-03-19</td>
</tr>
</tbody>
</Table>
<Button variant="info">글쓰기</Button>
<Button variant="secondary">수정하기</Button>
<Button variant="danger">삭제하기</Button>
</div>
);
}
}
export default BoardList;
6. 수정된 UI를 확인한다.
목록 화면은 어느 정도 된 것 같으니 글 작성 화면 컴포넌트도 만들어보자.
그전에..
컴포넌트 작성 중 ESLint에서 아래와 같은 에러가 발생하는 경우 해결방법
Delete `␍` eslint (prettier/prettier)
해당 컴포넌트를 열고, 우측 하단에 CRLF로 보이는 부분을 클릭 > LF로 변경해주면 된다.
그럼 다시 본론으로 와서 글 작성 컴포넌트 만들기
1. src 폴더 아래 Write.tsx 파일을 생성하고, 아래 코드를 입력한다.
import { Component } from "react";
import Form from "react-bootstrap/Form";
/**
* Write class
*/
class Write extends Component {
/**
* @return {Component} Component
*/
render() {
return (
<div>
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>제목</Form.Label>
<Form.Control type="email" placeholder="name@example.com" />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>내용</Form.Label>
<Form.Control as="textarea" />
</Form.Group>
</Form>
<Button variant="info">작성완료</Button>
<Button variant="secondary">취소</Button>
</div>
);
}
}
export default Write;
2. App.tsx 파일의 <BoardList></BoardList> 태그 아래에 아래 코드를 삽입한다.
<Write></Write>
3. 화면을 확인한다.
나중에는 router 등을 사용하여 페이지 단위로 컴포넌트를 만들겠지만, 우선 지금처럼 UI는 구성하고 기능 위주로 작업을 하려고 한다.
현재 UI만으로도 기본적인 CRUD는 모두 진행을 할 수 있으므로 게시판 UI는 끝내겠다.
이제 서버환경을 구성할 차례다.
크게 한 건 없지만 조금 쉬었다가 다음 포스팅에서 하겠다.
'개발 > react' 카테고리의 다른 글
[VSCode] React + nodejs + mySQL로 게시판 만들기 6편 - 게시물 쓰기, 수정, 삭제(1) (3) | 2022.03.23 |
---|---|
[VSCode] React + nodejs + mySQL로 게시판 만들기 5편 - 테이블 생성, 게시판 목록 조회 (3) | 2022.03.22 |
[VSCode] React + nodejs + mySQL로 게시판 만들기 4편 - 서버 환경 구성 (13) | 2022.03.21 |
[VSCode] React + nodejs + mySQL로 게시판 만들기 3편 - MySQL 설치 (0) | 2022.03.21 |
[VSCode] React + nodejs + mySQL로 게시판 만들기 1편 - 리액트 개발환경 세팅하기 (3) | 2022.03.18 |