[React] 댓글 컴포넌트 만들기

 

실행결과

 

🔥 props.name과 props.comment를 이용한 댓글 컴포넌트 만들어보기

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,
    },
};



function 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;

 

1. Comment.jsx 파일을 생성한 뒤 style을 꾸며준다(inline-style)

 *재사용 가능한 변수에 inline style을 작성하면, 분리된 파일에 저장될 수 있다

 

/* 코멘트 데이터를 동적 데이터로 불러오기 */

const comments = [
    {
        name: "Bonny",
        comment: "Hi guys~",
    },
    {
        name: "John",
        comment: "haha",
    },
    {
        name: "Mike",
        comment: "Let's study",
    },
];

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

}


export default CommentList;

 

2. CommentList.jsx 파일을 생성한 뒤 Comment 데이터를 동적 데이터로 불러오는 컴포넌트를 생성한다

 

import CommentList from './chap_05/CommentList';


  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<CommentList />);

 

3. index.js 파일에 랜더링 하기 위한 코드를 추가한다

 

---

🔗 React style 5가지 타입 참고 

How to Style Your React App – 5 Ways to Write CSS in 2021