1. 폴더 구조

2. Comment.jsx

import React from "react";

const styles = {
    wrapper: {
        margin: 8,
        padding: 8,
        display: "flex",
        flexDirection: "row",
        border: "1px solid grey",
        borderRadius: 16,
    },
    imageContainer: {},
    image: {
        width: 50,
        height: 50,
        borderRadius: 25,
    },
    contentContainer: {
        marginLeft: 8,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
    },
    nameText: {
        color: "black",
        fontSize: 16,
        fontWeight: "bold"
    },
    commentText: {
        color: "black",
        fontSize: 16,
    }
}

const Comment = (props) => {
    return (
        <div style={styles.wrapper}>
            <div style={styles.imageContainer}>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" 
                alt=""
                style={styles.image} />
            </div>

            <div style={styles.contentContainer}>
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commentText}>{props.comment}</span>
            </div>
        </div>
    );
}


export default Comment;

길어 보이는데, Style은 CSS 용이어서 그리 중요한 부분은 아니다. 잘 확인해야할 부분은, 해당 Comment 컴포넌트는 props에서 이름과 댓글을 받아서 뿌린다는 것이다.

2. CommentList.jsx

import React from "react";
import Comment from "./Comment";

const comments = [
{
    name: "전수민",
    comment: "끝까지 가면 내가 다 이겨"
},
{
    name: "이민혁",
    comment: "보고 싶다 친구들아"
},
{
    name: "차차",
    comment: "다 함께, 차차차"

}
];

const CommentList = (props) => {
    return (
        <div>
            {comments.map((comment) => {
                return (
                    <Comment name={comment.name} comment={comment.comment}/>
                );
            })}
        </div>
    )
}

export default CommentList;