피드영역 컴포넌트화

어제 댓글영역을 컴포넌트화하고 오늘은 피드영역을 컴포넌트화했는데

1. Feeds.js 에 전달할 props

const feedsList = [
  {
    id: 4,
    feedsProfileUrl: './images/eunjungPark/feeds-profile.png',
    userId: 'eunJeong ',
    feedsImageUrl: './images/eunjungPark/feeds-image.png',
    mineProfileUrl: './images/eunjungPark/feeds-profile.png',
    likeUserId: 'chunSig ',
    likeUserNum: '10명',
    commentTitText: '수호가 라이언을 좋아하는구나..!',
  },
  {
    id: 5,
    feedsProfileUrl: './images/eunjungPark/feeds-profile.png',
    userId: 'eunJeong22 ',
    feedsImageUrl: './images/eunjungPark/feeds-image.png',
    mineProfileUrl: './images/eunjungPark/feeds-profile.png',
    likeUserId: 'chunSig22 ',
    likeUserNum: '20명',
    commentTitText: '수호가 라이언을 좋아하는구나..!',
  },
  {
    id: 6,
    feedsProfileUrl: './images/eunjungPark/feeds-profile.png',
    userId: 'eunJeong33 ',
    feedsImageUrl: './images/eunjungPark/feeds-image.png',
    mineProfileUrl: './images/eunjungPark/feeds-profile.png',
    likeUserId: 'chunSig33 ',
    likeUserNum: '30명',
    commentTitText: '수호가 라이언을 좋아하는구나..!',
  },
];

2. <Feeds /> 컴포넌트 만들기

{feedsList.map(feed => {
    return (
        <Feeds
         key={feed.id}
         feedsProfileText={feed.feedsProfileText}
         feedsProfileUrl={feed.feedsProfileUrl}
         userId={feed.userId}
         feedsImageText={feed.feedsImageText}
         feedsImageUrl={feed.feedsImageUrl}
         mineProfileText={feed.mineProfileText}
         mineProfileUrl={feed.mineProfileUrl}
         likeUserId={feed.likeUserId}
         likeUserNum={feed.likeUserNum}
         commentTitText={feed.commentTitText}
         />
      );
 })}

3. Feeds.js 컴포넌트 작성

feeds 영역을 그대로 복사해서 새로운 js 파일에 붙여 놓은 다음에
달라지는 부분의 데이터만 props로 받았다

댓글에서는 그게 2개정도만 있어서 몰랐는데
이번에 feeds 컴포넌트를 작성하려고 보니 this.props 부분이 많이 중복되서
구조분해할당 을 하려고 했지만 종택님께 여쭤보고 다시 도전해봐야겠다

혼자하려다가 망할뻔... 깃 고마워...!

import React, { Component } from 'react';
import Comment from './Comment';

const commentList = [ (생략...) ]; // 이전 내용과 동일함

class Feeds extends Component {
  render() {
    console.log(this.props);
    return (
      <>
        <div className="feeds">
          <section className="article">
            <header className="title">
              <div className="title-left">
                <div className="feeds-profile">
                  <img alt="feeds-profile" src={this.props.feedsProfileUrl} />
                </div>
                <span className="user-id">{this.props.userId}</span>
              </div>
              <div className="title-right">
                <i className="fa fa-ellipsis-h" aria-hidden="true"></i>
              </div>
            </header>

            <article className="feeds-image">
              <img alt="feeds-image" src={this.props.feedsImageUrl} />
            </article>

            <article className="image-bottom">
              <div className="feeds-icon">
                <img
                  alt="좋아요"
                  src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png"
                />
                <img
                  alt="말풍선"
                  src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/comment.png"
                />
                <img
                  alt="공유하기"
                  src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/share.png"
                />
              </div>
              <div className="bookmark">
                <img
                  alt="북마크"
                  src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/bookmark.png"
                />
              </div>
            </article>

            <article className="comment-title">
              <div className="mine-profile">
                <img alt="mine-profile" src={this.props.mineProfileUrl} />
              </div>
              <div className="comment-tit">
                <span className="user-id">{this.props.likeUserId}</span>님
                <span className="bold">
                  외{' '}
                  <span className="like-number">{this.props.likeUserNum}</span>
                </span>
                이 좋아합니다.
              </div>
            </article>

            <footer className="art-comment">
              <div className="comment-nth">
                <span className="user-id">{this.props.userId}</span>
                <span>{this.props.commentTitText}</span>
                <span className="color-light">더 보기</span>
              </div>

              <div className="comment-nth">
                {commentList.map(comment => {
                  return (
                    <Comment
                      key={comment.id}
                      userId={comment.userId}
                      commentText={comment.commentText}
                    />
                  );
                })}
                <p className="color-light">42분 전</p>
              </div>
            </footer>

            <div className="comment-plus">
              <input
                id="comment-input"
                type="text"
                placeholder="댓글 달기..."
                // onChange={this.handleCommentInput}
                // onKeyUp={this.changeColor}
                // value={this.state.value}
              />
              <button
                className="comment-btn"
                disabled="disabled"
                onClick={this.addComment}
              >
                게시
              </button>
            </div>
          </section>
        </div>
      </>
    );
  }
}

export default Feeds;

4. 새로운 문제점

여러개의 컴포넌트를 만들고 실행해봤는데 피드가 아래로 늘어나는 게 아니라 가로로 늘어나서
새로운 모습을 보여줬다...

참신한 모습이라 괜찮겠지! 하고 생각하고 싶었지만 새로 작업해야겠다...