React | 댓글을 Component로 분리했다!

👇🏻 Main.js

<Comment commentList={commentList} />

원래 댓글 <div>가 있던 자리에 <Comment />를 넣어 주었다.

👇🏻 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">zzz_yk</span>
              {comment}
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default Comment;

👇🏻 Comment.scss

.main_body {
  .mainWrap {
    .main {
      div.feeds {
        .feeds_text_top {
          display: flex;
          margin-top: 5px;
          align-items: flex-start;
          flex-direction: column;
          strong {
            font-weight: bolder;
          }
          .comment_list {
            margin-bottom: 10px;
            margin-left: 13px;
            .comment_box {
              margin-bottom: 5px;
            }
            .comment_id {
              margin-right: 5px;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
}

nesting한 것을 그대로 복붙하면 되는지 상위 class명도 다 넣어줘야 되는 건지가 궁금했다.
재상님께서 친절하게 설명해주셨다. 정말 감사합니다! 🙏🏻

적용이 잘 되었다. 굳굳! 👍🏻