게시판 구현해보기(1)
배운것들을 활용해서 게시판을 만들어 보았다.
크게 4개의 컴포넌트로 구상하였는데
첫번째는 게시글 목록을 보여줄 List 컴포넌트, 두번째는 목록에서 제목을 누르면 내용을 보여줄 상세페이지
Detail컴포넌트, 세번째는 상세페이지에서 내용을 바꿀 수 있게 해주는 수정페이지 Modify 컴포넌트,
네번째는 게시글 목록에서 글쓰기버튼으로 게시글을 추가하게해주는 Create 컴포넌트이다.
일단 다 기본 틀만 만들어놓고 서버에 필요한것들을 다 인스톨 한 뒤
server.js 에 이렇게 작성해준다.
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');
//express 사용하기 위한 app 생성
const app = express();
//express 사용할 서버포트 설정
const PORT = 5000;
app.use(cors());
app.use(bodyParser.json());
//DB 접속
const db = mysql.createConnection({
host : 'localhost',
user: 'react',
password: 'mysql',
port:'3306',
database:'db_react'
});
// express 접속
app.listen(PORT, ()=>{
console.log(`server connecting on : http://localhost:${PORT}`);
});
//db 연결
db.connect((err)=>{
if(!err){
console.log("seccuss");
}else{
console.log("fail");
}
});
// --------- DB에서 값을 가져오기 -------------
// / => root 연결시 보여지는 기본화면 설정
app.get('/', (req, res) =>{
res.send('React Server Connect Success!!');
});
그리고 화면이 나와야하니 App.js에
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import List from './component/List';
import Detail from './component/Detail';
import Create from './component/Create';
import Modify from './component/Modify';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<List />} />
<Route path='/list' element={<List />} />
<Route path='/detail/:id' element={<Detail/>} />
<Route path='/create' element={<Create />} />
<Route path='/modify/:id' element={<Modify/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
화면이나오도록 , 누르면 페이지가 넘어 갈 수 있도록 코드를 짜준다.
게시글 목록 페이지 List 구현하기
일단 게시글 목록페이지에서 구현할 기능은 검색기능, 페이지네이션, 최신/조회순 정렬 크게 3가지이다.
return (
<div className='list'>
<Link style={{ textDecoration: "none"}} to={'/list'}><h2>자유게시판</h2></Link>
<hr />
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회</th>
</tr>
</thead>
<tbody>
{
currentItems.map(b => (
<tr key={b.id} >
<td>{b.id}</td>
<td><Link to={`/detail/${b.id}`} onClick={() => plusViewCount(b.id)}>{b.title}</Link></td>
<td>{b.writer}</td>
<td>{b.reg_date.substring(0,10)}</td>
<td>{b.viewCount}</td>
</tr>
))
}
</tbody>
</table>
)
일단 화면에 표시할 항목들을 적어주고
const [ list, setList ] = useState([]);
const getListData = async () => {
const lists = await axios.get('/list');
setList(lists.data);
}
useEffect(() => {
getListData();
},[]);
app.get('/list', (req, res) => {
console.log('/list');
const sql = 'select * from free_board order by id desc';
db.query(sql, (err, data) => {
if(!err){
res.send(data);
} else {
console.log(err);
res.send('전송오류');
}
})
});
를 통해 데이터를 가져올 수 있게한다.
가져올 수 있게하기 위해 DB는 미리 만들어두었다
db의 구성은 이러하다.
create table free_board (
id bigint auto_increment primary key,
title varchar(30),
contents varchar(500),
writer varchar(20),
reg_date timestamp DEFAULT now(),
viewCount int default 0
);
리스트를 만들면서 Create 전에 데이터를 확인할 수 있게 데이터를 몇개 넣어두자.
이제
app.post('/list/:id', async (req, res) => {
const { id } = req.params;
const sql = `update free_board set viewCount = viewCount + 1 where id = ${id}`;
db.query(sql, (err, data) => {
if(!err){
res.sendStatus(200);
} else {
console.log(err);
res.send('전송오류');
}
})
});
를 통해 조회수가 상세페이지로 넘어가면서 +1 올라가도록 만들어주고.
검색기능을 구현해보도록하자.
const [searchTerm, setSearchTerm] = useState('');
const [filteredList, setFilteredList] = useState([]);
const [searchOption, setSearchOption] = useState('title');
크게 3개의 상태를 정의하는데
검색입력창의 상태, 검색하고 필터링된 리스트의 상태, 그리고 무엇으로 검색할건지의 대한 옵션의 상태를 정의해준다.
const handleSearch = () => {
if (searchTerm) {
const filtered = list.filter(item => {
if (searchOption === 'title') {
return item.title.includes(searchTerm);
} else if (searchOption === 'writer') {
return item.writer.includes(searchTerm);
} else if (searchOption === 'both') {
return item.title.includes(searchTerm) || item.writer.includes(searchTerm);
}
return false;
});
setFilteredList(filtered);
} else {
setFilteredList(list);
}
setSearchTerm('');
};
정의 후 옵션의 상태에따라 포함 유무에따라 필터링 할 수 있도록 이렇게 짜준 후, 검색 후에 내용이 비워지도록 설정.
const getListData = async () => {
const lists = await axios.get('/list');
setList(lists.data);
setFilteredList(lists.data);
}
데이터를 가져올 때도 setFilteredList에도 가져오도록 추가설정.
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
handleSearch();
}
};
엔터를 눌렀을 때도 검색이 가능하도록 추가설정해준다.
<select value={searchOption} onChange={(e) => setSearchOption(e.target.value)}>
<option value="title">제목</option>
<option value="writer">작성자</option>
<option value="both">제목+작성자</option>
</select>
<input
className='search'
type="text"
placeholder="검색어 입력"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyDown={handleKeyPress}
/>
<button className='searchBtn' onClick={handleSearch}>검색</button>
그리고 화면에 나오도록 이렇게 구현해주면 검색기능이 구현된다.
이제 게시글이 너무많으면 페이지가 생성되어 넘어갈 수 있도록 구현해보자.
이번에는 8개가 넘어가면 페이지가 생성되고 넘어가도록 구현해 보도록 하겠다.
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 8;
페이지의 상태와 한페이지 당 게시글의 수를 정의주도록 한다.
검색기능 구현에 setCurrentPage(1); 를 넣어서 검색 후 1페이지가 되도록 추가해주고.
const totalPages = Math.ceil(filteredList.length / itemsPerPage);
const startIndex = (currentPage - 1) * itemsPerPage;
const currentItems = filteredList.slice(startIndex, startIndex + itemsPerPage);
전체페이지, 현재페이지, 시작인덱스를 정의해주도록 하자.
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};
const onPre = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
const onNext = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
}
};
그러고 페이지 이동을 구현.
<div className='pagination'>
<button onClick={onPre} disabled={currentPage === 1}>
이전
</button>
{Array.from({ length: totalPages }, (_, index) => (
<button
key={index + 1}
onClick={() => handlePageChange(index + 1)}
disabled={currentPage === index + 1}
>
{index + 1}
</button>
))}
<button onClick={onNext} disabled={currentPage === totalPages}>
다음
</button>
선택한 페이지와 1은 이전, 최대페이지면 다음 버튼을 disabled 해서 비활성화 시켜주면서 화면에 구성하면
페이지네이션이 구현된다.
이제 정렬 기능만 넣으면 리스트 기능은 구현은 끝이난다.
const [sort, setSort] = useState('latest');
정렬 상태를 일단 정의해주고
const sortList = (list) => {
return [...list].sort((a, b) => {
if (sort === 'latest') {
return new Date(b.reg_date) - new Date(a.reg_date);
} else if (sort === 'views') {
return b.viewCount - a.viewCount;
}
return 0;
});
};
sortList 기존 list를 스프레드로 받아와서 sort의 상태에따라 시간순, 조회순으로 정렬 할 수있도록 기능을 만들어준다.
useEffect(() => {
const sortedList = sortList(filteredList);
setFilteredList(sortedList);
}, [sort]);
sort가 바뀔때마다 필터링 되어서 정렬 할 수있도록 useEffect해준다.
<div className='sort-container'>
<div className='sort'>
<button
className={sort === 'latest' ? 'active' : ''}
onClick={() => setSort('latest')}
>
최신순
</button>
<button
className={sort === 'views' ? 'active' : ''}
onClick={() => setSort('views')}
>
조회순
</button>
</div>
</div>
이제 화면에서 최신순 , 조회순 버튼을 만들어주고 active 되면 버튼에 불이 들어오도록 css할 수 있게 active를 넣어주었다.
리스트 페이지 완성
페이지에 따라 게시글 목록이 넘어가고 검색기능, 최신/ 조회순으로 정렬 할 수 있는 기능이 구현된 것을 볼 수 있다.