[ReactJS] react-router 활용하여 게시글 상세 페이지 구성 및 마무리 (React로 아주 간단한 게시판 만들기 - 4)

React는 SPA(Single Page Application) 시스템 구성에 최적화 된 Framework로서 페이지를 이동할 때 일반적인 웹 페이지의 페이지 전환과는 조금 다른 방식으로 구성을 해야됩니다.
혹은 React의 가상 DOM이 최종 Mounting 되는 HTML 페이지를 여러개 만들어 특정 URL을 특정 HTML에 매핑해주고 각 HTML 페이지마다 index Componnet를 구성하는 방법도 있겠으나 간단하게 react-router를 사용하여 URL에 따라 컴포넌트를 각 URL에 해당되는 페이지로 사용될 수 있도록 할 수 있습니다.

 

이전글

2020/10/29 - [ReactJS] - [ReactJS] useState(), useEffect() 사용하여 데이터 요청 및 관리 (ReactJS로 아주 간단한 게시판 만들기 - 3)

[ReactJS] useState(), useEffect() 사용하여 데이터 요청 및 관리 (ReactJS로 아주 간단한 게시판 만들기 - 3)

 

일반적인 게시판의 경우 게시글 목록페이지에서 특정 게시글을 클릭하면 게시글 상세 페이지로 이동하거나 게시글 상세 모달창을 띄워 게시글 내용을 볼 수 있습니다.

여기서는 게시글을 클릭했을때 게시글 상세 페이지로 이동하도록 구현을 하도록 하겠습니다.

 

우선 React는 기본적으로 index.js 파일을 최상위 Root Component로 빌드시 index.html에 Rendering 되어 WEB 구조적으로는 하나의 페이지로 구성이 되는것이 기본 베이스입니다.

그러나 React는 그와 비슷하게 URL 베이스로 Component를 교체 하는것이 가능한데 그 과정을 아주 간단하게 처리할 수 있도록 react-router를 제공해줍니다.

일반적으로 페이지를 이동할때 사용되는 HTML Tag인 <a>, Javascript의 location 객체의 함수들을 사용했을때와 동일한 Action으로 인식할 수 있습니다.

 

먼저 react-route-dom 패키지와 react-router 패키지를 설치해줍니다.

sudo npm install react-router react-router-dom

 

• App.js - Github에서 소스보기

import { BrowserRouter, Route } from 'react-router-dom';
import PostMain from './page/post/PostMain';
import PostView from './page/post/PostView';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route exact path='/postView/:no' component={PostView} />
        <Route exact path='/' component={PostMain} />
      </BrowserRouter>
    </div>
  );
}

export default App;

위와 같이 BrowserRouter, Route를 통해 URL을 기반으로 하여 나타낼 컴포넌트 및 URL을 구성해줍니다.

react-router에 활용될 컴포넌트는 필수적으로 BrowserRouter 하위에 위치해야 됩니다.

exact는 URL이 완벽하게 매칭해야된다라고 지정을 해주는것이고 /postView/:no 의 경우 :no 자리에 게시글 번호값이 전달될텐데 그 값을 파라미터 키로 no 라고 지정해주는것입니다.

 

그리고 아래와 같이 게시글 제목을 클릭했을때 react-router가 제공하는 Link Component를 통해 /postView/ 에 게시글 번호를 넣어 URL Redirect를 하도록 합니다.

• PostList.js - Github에서 소스보기

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import CommonTable from '../../component/table/CommonTable';
import CommonTableColumn from '../../component/table/CommonTableColumn';
import CommonTableRow from '../../component/table/CommonTableRow';
import postList from '../../Data';

const PostList = props => {
  const [ dataList, setDataList ] = useState([]);

  useEffect(() => {
    setDataList(postList);
  }, [ ])

  return (
    <>
      <CommonTable headersName={['글번호', '제목', '등록일', '조회수']}>
        {
          dataList ? dataList.map((item, index) => {
            return (
              <CommonTableRow key={index}>
                <CommonTableColumn>{ item.no }</CommonTableColumn>
                <CommonTableColumn>
                  <Link to={`/postView/${item.no}`}>{ item.title }</Link>
                </CommonTableColumn>
                <CommonTableColumn>{ item.createDate }</CommonTableColumn>
                <CommonTableColumn>{ item.readCount }</CommonTableColumn>
              </CommonTableRow>
            )
          }) : ''
        }
      </CommonTable>
    </>
  )
}

export default PostList;

 

마지막으로 아래와 같이 게시글 상세 컴포넌트인 PostView를 위와 같이 작성해줍니다.

 

• PostView.js - Github에서 소스보기

import React, { useEffect, useState } from 'react';
import { getPostByNo } from '../../Data';
import './Post.css';

const PostView = ({ history, location, match }) => {
  const [ data, setData ] = useState({});

  const { no } = match.params;

  useEffect(() => {
    setData(getPostByNo(no));
  }, [ ]);

  return (
    <>
      <h2 align="center">게시글 상세정보</h2>

      <div className="post-view-wrapper">
        {
          data ? (
            <>
              <div className="post-view-row">
                <label>게시글 번호</label>
                <label>{ data.no }</label>
              </div>
              <div className="post-view-row">
                <label>제목</label>
                <label>{ data.title }</label>
              </div>
              <div className="post-view-row">
                <label>작성일</label>
                <label>{ data.createDate }</label>
              </div>
              <div className="post-view-row">
                <label>조회수</label>
                <label>{ data.readCount }</label>
              </div>
              <div className="post-view-row">
                <label>내용</label>
                <div>
                  {
                    data.content
                  }
                </div>
              </div>
            </>
          ) : '해당 게시글을 찾을 수 없습니다.'
        }
        <button className="post-view-go-list-btn" onClick={() => history.goBack()}>목록으로 돌아가기</button>
      </div>
    </>
  )
}

export default PostView;

react-router를 통해 Component가 렌더링될때 컴포넌트 Props로 history, location, match 객체들이 전달됩니다.

router patameter로 넘어온 no 값으로 useEffect()를 통해 게시글 정보를 가져올 수 있도록 하고 목록으로 돌아가기 버튼을 클릭했을때 뒤로가기와 동일한 Action인 history.goBack() 함수를 호출하도록 합니다.

그 객체들에 parameter, url, page history와 같은 값들이 포함되어 있는데 궁금하시면 직접 확인해보면 될 것 같습니다.

 

최종화면

게시글 목록 페이지에서 특정 게시글의 제목을 클릭했을때 게시글 상세 페이지로 이동되는것을 확인할 수 있고

또한 게시글 상세페이지에서 목록으로 돌아가기 버튼을 클릭했을때 뒤로가기 액션이 발생하는것을 확인할 수 있습니다.

 

이상으로 ReactJS를 활용하여 아주 간단한 게시판 형태의 화면을 구현하는 포스팅이 마무리 되었습니다.

 

---

프로젝트 예제 소스코드 주소

 

youspend8/react-simple-blog-example