React | Mock data를 활용하여 여러 개의 댓글 구현하기

진짜 자료 하나만 던져주시고 혼자서 해결하라길래 너무 힘들었다 ㅠ
그래도 스스로 해내서 무척 뿌듯하다!!!

😥 삽질 과정...↓↓↓↓

👇🏻 CommentData.js

const COMMENTDATA = [
  {
    id: 1,
    userName: 'wecode',
    content: 'Welcome to world best coding bootcamp!',
  },
  {
    id: 2,
    userName: 'joonsikyang',
    content: 'Hi there.',
  },
  {
    id: 3,
    userName: 'jayPark',
    content: 'Hey.',
  },
];

export default COMMENTDATA;

JSON 파일로 다뤄보는것도 있었는데 fetch가 어려운 사람들은 js 파일로 진행해도 된대서 나는 js 파일로 진행했다. 이해하는게 더 중요하기 때문!

👇🏻 Comment.js

import React from 'react';
import './Comment.scss';

class Comment extends React.Component {
  render() {
    const { commentList } = this.props;

    return (
      <>
        <ul className="comment_list">
          {commentList.map((comment, i) => (
            <li key={i} className="comment_box">
              <span className="comment_id">{comment.userName}</span>
              {comment.content}
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default Comment;

props로 데이터를 넘겨주고 map 함수에 key 값을 줬다.
사실 삽질하면서 이것저것 넣어보다가 성공한거라 완전히 이해하진 못했다..!!

👇🏻 Main.js

// 추가한 부분만 넣음. 자세한건 Github 참고!
import COMMENTDATA from './CommentData';

componentDidMount() {
    this.setState({
      commentList: COMMENTDATA,
    });
  }

addComment = e => {
    e.preventDefault();
    const { commentList, comment } = this.state;
    this.setState({
      commentList: [
        ...commentList,
        {
          id: commentList.length + 1,
          userName: 'zzz_yk',
          content: comment,
        },
      ],
      comment: '',
    });
  };

render() {
    const { commentList, comment } = this.state;
    return (
      <Comment commentList={commentList} />
 	<div className="reply">
          <input
            type="text"
            id="input"
            value={comment}
            placeholder="댓글 달기..."
            onChange={this.writeComment}
            onKeyPress={this.enterKey}
          />
          <button
            type="button"
            class="reply-btn"
            onClick={this.addComment}
          >
          게시
          </button>
        </div>

굿!!!!!!!!
이제 Feed 나누기 해야하는데 이건 언제 한담ㅎ;;ㅎ