[DAY - 89] Redux 게시판 예제

Notice

const App = () => {
  return (
    <BrowserRouter>
      <Routes >
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="profile" element={<Profile />} />
          <Route path="project" element={<Project />} />

          <Route path="/notice">
            <Route index element={<Notice />} />
            <Route path=":noticeID" element={<NoticeDetail />} />
          </Route>

          <Route path="/customer">
            <Route index element={<Customer />} />
            <Route path="customeradd" element={<CustomerAdd />} />
            <Route path=":customerID" element={<CustomerDetail />} />
          </Route>

        </Route>
      </Routes>
    </BrowserRouter>
  );
};

Router와 Redux를 이용해서 게시판 페이지를 구현했다.
notice와 customer는 주소 뒤에 페이지 번호가 붙도록 Route를 구성했고, header와 footer는 항상 나오도록 Layout에 넣었다.
 

            <tbody>
                {
                    [...data]
                        .sort((a, b) => b.id - a.id)
                        .map(item => <NoticeItem key={item.id} item={item} />)
                }
            </tbody>

 
게시글들이 최근 번호가 위로 오도록 id에 sort를 하여 내림차순으로 출력되도록 했다.
 

        <tr>
            <td>{id}</td>
            <td><Link to={`/notice/${id}`}>{title}</Link></td>
            <td>{date}</td>
        </tr>

 
게시판의 제목을 클릭하면 해당 글의 내용이 출력되는 페이지로 이동하게 된다.
 

      <div className="inner">
        <h2>{title} </h2>
        <div className="notice-con">
          <p> {content} </p>
          <p> {date}</p>
        </div>
        <button onClick={()=>navigete('/notice')}>목록으로</button>
      </div>

 
게시글에서 목록으로 버튼을 클릭하면 useNavigeter를 사용해 게시판 목록 페이지로 이동하게 했다.
 

글쓰기

 const [user, setUser] = useState({ name: '', title: '', content: '' })
    const { name, title, content, date } = user
    const navigate = useNavigate()
    const dispatch = useDispatch()

    const changeInput = e => {
        const { name, value } = e.target
        setUser(
            {
                ...user,
                [name]: value
            }
        )
    }
    const onSubmit = e => {
        e.preventDefault()
        if(!name){
            alert('작성자를 입력하세요')
            return
        } else if(!title){
            alert('제목을 입력하세요')
            return
        } else if(!content){
            alert('내용을 입력하세요')
            return
        }
        navigate('/customer')
        dispatch(add(user))
    }

 
QnA 게시판의 글쓰기 버튼 클릭 시 form 태그가 있는 컴포넌트가 출력되며 name과 value를 이용해서 새로운 게시글의 데이터를 user에 저장한다.
저장한 데이터는 add 함수로 보내지며 add 함수에서는 기존의 데이터에 push를 한다.
 

 add(state, action) {
            let today = new Date();
            let year = today.getFullYear();
            let month = ('0' + (today.getMonth() + 1)).slice(-2);
            let day = ('0' + today.getDate()).slice(-2);
            let dateString = year + '-' + month + '-' + day;

            const newItem = {
                id: state.data.length + 1,
                date: dateString,
                ...action.payload,
            };
            state.data.push(newItem)
        },
        remove(state, action) {
            state.data = state.data.filter(item => item.id !== action.payload)

            state.data = state.data.map(item => item.id > action.payload ?
                {
                    ...item,
                    id: item.id - 1
                }
                :
                item)
        },

게시글 번호

 
게시글의 삭제 버튼을 누르면 해당 데이터가 지워지게 되는데, 1,2,3,4번의 게시글 중 3번 게시글을 지우면 id가 4인 게시글의 번호가 그대로 이기 대문에 id : 3의 데이터가 비워지게 된다.
이를 방지하기 위해 삭제한 게시글의 id 보다 큰 게시글의 id값을 -1씩 해주었다.
 

remove(state, action) {
  state.data = state.data.filter(item => item.id !== action.payload).map((item, index) => ({
    ...item,
    id: index + 1
  }));
}

 
위 코드보다 더 간단하게 index를 사용해서 구현할 수도 있다.