리액트 - redux-thunk로 Promise다루기 - 라우터 연동, 특정 포스트 읽기

이전에 만든 포스트리스트의 각 항목을 클릭하면 해당 id의 body 내용을 불러오는 페이지로 이동하는 기능을 추가하려고 한다.

먼저 해당 항목을 클릭할때 렌더링 되는 컴포넌트인 Post.js를 작성한다.

props 값으로 post를 불러오고 비구조화 할당으로 title과 body를 사용한다.

import React from 'react'

const Post = ({post}) => {
    const { title, body} = post;

  return (
    <div>
      <h1>{title}</h1>
      <p>{body}</p>
    </div>
  )
}

export default Post

이제 리덕스와 연동할 PostContainer.js를 작성한다. 이전의 PostListContainer와 비슷하지만 이 경우에는 postId 값을 파라미터로 받아와야하는 것을 잊으면 안된다.

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getPost } from '../modules/posts';
import Post from '../components/Post'

const PostContainer = ({postId}) => {
    const {data, loading, error } = useSelector(state => state.posts.post)
    const dispatch = useDispatch();
    useEffect(()=> {
        dispatch(getPost(postId))
    },[postId, dispatch]);

    if (loading) return <div>로딩중...</div>
    if (error) return <div>에러 발생!</div>
    if (!data) return null;
  return (
    <Post post={data}/>
  )
}

export default PostContainer

그럼 postId는 어디서 받아오느냐 하면 바로 라우터로 props를 전송하게 할것이다.

PostContainer 에 postId props 를 전송하는 Postpage.js를 작성한다.
파라미터로 가져오는 id 의 값은 숫자가 아닌 문자이므로 이를 숫자로 변경해주어야한다.

import React from 'react'
import { useParams } from 'react-router-dom';
import PostContainer from '../containers/PostContainer';

const Postpage = () => {
    const { id }= useParams();
    const postId = parseInt(id, 10);
  return (
    <PostContainer postId={postId}/>
  )
}

export default Postpage

App에서 Routes,Route를 사용하여 url에 따라 다른 페이지가 렌더링 되게 수정한다.

import React from 'react'
import CounterContainer from './containers/CounterContainer';
import PostListContainer from './containers/PostListContainer';
import {Route, Routes} from 'react-router-dom';
import Postpage from './pages/Postpage';

function App() {
  return (
   <Routes>
     <Route path="/" element={<PostListContainer/>}/>
     <Route path="/:id" element={<Postpage/>}/> 
   </Routes>
  );
}

export default App;

이렇게만 하면 끝이 아니라 PostListContainer로 렌더링 되는 항목들을 클릭했을때, url에 추가된 주소로 이동할수 있게 Link를 추가해야한다.

import React from 'react'
import { Link } from 'react-router-dom'

const PostList = ({posts}) => {
  return (
    <ul>
        {
            posts.map(post => (
            <li key={post.id}>
              <Link to={`/${post.id}`}>{post.title}</Link>
              </li>))
        }
    </ul>
  )
}

export default PostList

이제 항목을 클릭하면 Link에서 지정한 경로로 이동하게 된다.