14-4. 유저 포스트 보여주기

유저 프로필 정보도 제대로 보여주었으니, 이제 유저 포스트들을 보여줄 차례입니다. 포스트를 보여주는것에 대한 코드들은 이미 우리가 상당히 많이 구현을 해놓았기 때문에, 이를 재사용하면 됩니다.

포스트 로딩 API 함수 수정하기

지금의 경우엔 posts API 함수를 보면, 다음과 같이 되어있습니다:

src/lib/api/posts.js - list, listOfUser

export const list = () => axios.get('/api/posts');
export const listOfUser = (username) => axios.get(`/api/posts?username=${username}`);

모든 포스트 목록을 불러오는것과, 특정 유저의 포스트 목록을 불러오는것이 분리가 되어있는데요. 이렇게 함수를 분리하고 나면, 용도에 따라 골라 쓸 수 있는 대신에, 나중에 우리가 액션을 만들 때 액션을 재사용하지 못 한다는 단점이 있습니다.

그렇기 때문에, 위 함수를 하나의 함수로 합쳐주겠습니다.

src/lib/api/posts.js - list

export const list = (username) => axios.get('/api/posts' + (username ? `?username=${username}` : ''));

이 함수는, 유저명이 주어지면 해당 유저의 포스트들을 조회하고, 그렇지 않으면 모든 포스트를 조회합니다. 이렇게 함으로서, 우리가 나중에 이 함수를 기반으로 만들어진 액션 생성자를 실행하게 될 때, username 파라미터만 넣어줌으로서 포스트들을 로딩 할 수 있게 됩니다.

PostListContainer 에서 유저 포스트 로딩 구현하기

우리는 나중에, User 페이지에서 PostListContainer 를 렌더링 할 때 username 을 props 로 전달해주게 됩니다. 그러면, 이 PostListContainer 는, 해당 props 의 존재여부에 따라 포스트를 로딩 할 때 username 을 설정해서 데이터를 요청합니다.

PostListContaine 에서 load 메소드만 수정하면 준비가 끝납니다.

src/containers/Shared/PostListContainer.js - load 메소드

    // 포스트 목록 초기로딩
    load = async () => {
        const { PostsActions, username } = this.props;

        try {
            await PostsActions.loadPost(username);
            const { next } = this.props;

            if(next) {
                // 다음 불러올 포스트들이 있다면 미리 로딩을 해둔다
                await PostsActions.prefetchPost(next);
            }
        } catch (e) {
            console.log(e);
        }
    }

참 간단하죠? 이제 PostListContainer 를 User 페이지에 렌더링만 해주면 끝납니다.

src/pages/User.js

import React, { Component } from 'react';
import PageWrapper from 'components/Base/PageWrapper';
import UserHeadContainer from 'containers/User/UserHeadContainer';
import PostListContainer from 'containers/Shared/PostList/PostListContainer';

class User extends Component {
    render() {
        const { match } = this.props;
        const { username } = match.params;

        return (
            <PageWrapper>
                <UserHeadContainer username={username}/>
                <PostListContainer username={username}/>
            </PageWrapper>
        );
    }
}

export default User;