[인스타그램클론코딩] #7.1 Post Component part One

안녕하세요 강정호입니다

 

오늘은 인스타그램에 Feed를 보여주기 위해서 포스팅 객체를 조회하기 위한 밑작업을 진행하겠습니다.

 

Post 객체를 조회하기 위해서 이렇게 3개로 구성하였습니다.

index.js : Post를 조회하려는 요청이 들어올 경우 index.js로 요청이 가고, index.js는 PostContainer.js로 요청을 보낸다.

PostContainer.js : Post 객체를 가공하고, PropTypes를 검증하는 프로그램

PostPresenter.js : Post 객체를 View로서 조립하여 보여주는 프로그램

 

프로그램 흐름

1) Feed.js : useQuery(FEED_QUERY)로 user의 Post 내역을 모두 조회한다. 조회한 Post 데이터를 <Post />에 넣고 호출한다

2) /Post/index.js : 받은 요청을 PostContainer.js로 보낸다

3) /Post/PostContainer.js : Post 객체를 가공하는 작업

4) /Post/PostPresenter.js : Post 객체를 보여주는 View

 

Feed.js

export default () => {
    const { data, loading } = useQuery(FEED_QUERY);
    console.log(data);
    return (
        <Wrapper>
            { loading && <Loader /> }
            {!loading &&
                data &&
                data.seeFeed &&
                data.seeFeed.map(post => (
                    <Post 
                        key={post.id} 
                        id={post.id}
                        user={post.user}
                        files={post.files}
                        likeCount={post.likeCount}
                        isLiked={post.isLiked}
                        comments={post.comments}
                        createdAt={post.createdAt}
                    />
                    )
                ) 
            }
        </Wrapper>
    )
};

 

/Post/index.js

import PostContainer from "./PostContainer";

export default PostContainer;

 

PostContainer.js

import React, { useState } from "react";
import PostPresenter from "./PostPresenter";
import PropTypes from "prop-types";
import useInput from "../../Hooks/useInput";

const PostContainer = ({id, 
                        user, 
                        files,
                        likeCount,
                        isLiked,
                        comments,
                        createdAt}) => {
    return <PostPresenter />;
}

PostContainer.propTypes = {
    id:PropTypes.string.isRequired,
    user:PropTypes.PropTypes.shape({
        id: PropTypes.string.isRequired,
        avatar:PropTypes.string,
        userName:PropTypes.string.isRequired
    }).isRequired, 
    files:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.string.isRequired,
            url:PropTypes.string.isRequired
        })
    ).isRequired,
    likeCount:PropTypes.number.isRequired,
    isLiked:PropTypes.bool.isRequired,
    comments:PropTypes.arrayOf(PropTypes.shape({
        id:PropTypes.string.isRequired,
        text:PropTypes.string.isRequired,
        user:PropTypes.shape({
            id:PropTypes.string.isRequired,
            userName:PropTypes.string.isRequired
        }).isRequired
    })).isRequired,
    createdAt:PropTypes.string.isRequired
};

export default PostContainer;

 

PostPresenter.js

아직 미완성 상태