10-6. 포스트 정보 props 로 전달하기

이번 섹션에서는 서버에서 받아온 데이터를 props 로 PostList, Post 컴포넌트에 전달해보겠습니다.

우선 PostListContainer 의 render 메소드를 다음과 같이 업데이트 하세요.

src/containers/Shared/PostList/PostListContainer.js

    render() {
        const { data } = this.props;
        return (
            <PostList posts={data}/>
        );
    }

그 다음엔 PostList 를 다음과 같이 수정합니다.

src/components/Shared/PostList/PostList.js

const PostList = ({posts}) => {
    const postList = posts.map(
        (post) => (
            <Post key={post.get('_id')} post={post}/>
        )
    )
    return (
        <Wrapper>
            <Masonry options={{gutter: 16}}>
                {postList}
            </Masonry>
        </Wrapper>
    );
}

post 를 immutable 형태 그대로 전달을 해주었고, 배열을 렌더링 하는 것 이니 id 값을 키로 주었습니다.

이제, Post 컴포넌트에서 방금 전달받은 post 값을 편의상 .toJS() 를 통하여 일반 자바스크립트 객체로 변환시키고, 객체 비구조화를 통하여 필요한 레퍼런스를 미리 만든다음에 JSX 안에 넣어서 렌더링해보겠습니다.

src/components/Shared/PostList/Post.js

(...)
const Post = ({post}) =>{
    const {
        count,
        username,
        content,
        comments,
        likesCount,
        createdAt
    } = post.toJS();

    return (
        <Wrapper>
            <PostHead>
                <UserThumbnail image={`/api/users/${username}/thumbnail`}/>
                <Username>{username}</Username>
                <Count>#{count}번째 생각</Count>
                <Time><TimeAgo date={createdAt} formatter={formatter}/></Time>
            </PostHead>
            <Content>
                {content}
            </Content>
        </Wrapper>
    )
}

export default Post;

자, 이제 우리가 서버에 넣었던 데이터가 보여지나요?

;