12-6. 좋아요 기능 구현하기

이제 좋아요 기능이 실제로 작동 할 수 있도록, 마무리 작업을 해주겠습니다.

먼저, PostListContainer 컴포넌트에서 handleToggleLike 라는 메소드를 정의하세요. 이 메소드는 postId 와 liked 값을 파라미터로 받게되는데, liked 값에 따라 그 반대 작업을 합니다. 예를들어 좋아요 상태면 좋아오 취소를 하고, 좋아요를 하지 않은 상태면 좋아요를 하는것이죠.

이 메소드는, 만약에 로그인 상태가 아니라면, 작동하지 않습니다. 로그인 상태가 아닐떄는 toast 를 통하여 에러를 띄워주며, 이 컴포넌트에서 로그인 상태를 알 수 있도록 하단의 connect 부분에서 logged 값을 설정하세요.

그 다음에는, 이 메소드를 PostList 의 props 로 전달하세요.

src/containers/Shared/PostList/PostListContainer.js

(...)
import { toast } from 'react-toastify';

class PostListContainer extends Component {
    (...)

    handleToggleLike = ({postId, liked}) => {
        const { PostsActions, logged } = this.props;

        const message = (message) => (<div style={{fontSize: '1.1rem'}}>{message}</div>);
        if(!logged) {
            return toast(message('로그인 후 이용 하실 수 있습니다.'), { type: 'error' });
        }
        if(liked) {
            PostsActions.unlikePost(postId);
        } else {
            PostsActions.likePost(postId);
        }
    }


    (...)

    render() {
        const { data } = this.props;
        const { handleToggleLike } = this;

        return (
            <PostList 
                posts={data} 
                onToggleLike={handleToggleLike}
            />
        );
    }
}

export default connect(
    (state) => ({
        (...)
        logged: state.user.get('logged')
    }),
    (dispatch) => ({
        PostsActions: bindActionCreators(postsActions, dispatch)
    })
)(PostListContainer);

전달해준, onToggleLike 값을 그대로 Post 컴포넌트들에게도 전달해줍니다.

src/components/Shared/PostList/Post.js

import React from 'react';
import styled from 'styled-components';
import Masonry from 'react-masonry-component';
import Post from './Post';

const Wrapper = styled.div`
    position: relative;
    margin-top: 1rem;
`;

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

export default PostList;

그 다음에는 Post 컴포넌트에서 PostFooter 로 값을 전달해줄건데요, liked 와 likesCount 를 전달해주고, 또 toggleLike 함수를 내부에 정의하여 props 로 전달하세요.

이 함수는 각 포스트마다 정의되는것으로, props 로 받아온 onToggleLike 메소드에 현재의 포스트아이디와 좋아요 상태를 넣어서 실행시켜줍니다.

src/components/Shared/PostList/Post.js

(...)

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

    const toggleLike = () => onToggleLike({
        postId: _id,
        liked
    });

    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>
            <PostFooter likesCount={likesCount} liked={liked} onToggleLike={toggleLike}/>
        </Wrapper>
    )
}

export default Post;

이제, onToggleLike 를 PostFooter 에서 좋아요 버튼을 눌렀을 때 실행하도록 하면, 좋아요 기능이 완성됩니다.

src/components/Shared/PostList/PostFooter.js

(...)

const PostFooter = ({liked, likesCount=0, comments=[], onToggleLike, onCommentClick}) => (
    <Wrapper>
        <Likes active={liked}>
            <HeartIcon onClick={onToggleLike}/>
            <span>좋아요 {likesCount}개</span>
        </Likes>
        <Comments>
            <CommentIcon/>
            <span>덧글 {comments.length}개</span>
        </Comments>
    </Wrapper>
);

export default PostFooter;