피드영역 컴포넌트화
어제 댓글영역을 컴포넌트화하고 오늘은 피드영역을 컴포넌트화했는데
- 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: '수호가 라이언을 좋아하는구나..!',
},
];
<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}
/>
);
})}
- 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;
- 새로운 문제점
여러개의 컴포넌트를 만들고 실행해봤는데 피드가 아래로 늘어나는 게 아니라 가로로 늘어나서
새로운 모습을 보여줬다...
참신한 모습이라 괜찮겠지! 하고 생각하고 싶었지만 새로 작업해야겠다...
Author And Source
이 문제에 관하여(피드영역 컴포넌트화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@beanlove97/피드영역-컴포넌트화저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)