[소플의 처음 만난 리액트] 5장 실습문제

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

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="profilePicture" 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;

CommentList.jsx

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

const comments = [
  {
    name: "이인제",
    comment: "안녕하세요, 소플입니다.",
  },
  {
    name: "유재석",
    comment: "리액트 재미있어요~!",
  },
  {
    name: "강민경",
    comment: "저도 리액트 배워 보고 싶어요!!",
  },
]

function CommentList(props) {
  return (
    <div>
      {comments.map((e) => {  // e는 element의 줄임말
        return (
          <Comment name={e.name} comment={e.comment} />
        );
      })}
    </div>
  );
}

export default CommentList;

핵심 키워드

• 댓글 모양을 표현하기 위해 CSS 코드를 props로 넘겨줄 수 있다.

• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다.

• 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

• JSX에서 이벤트 핸들러로 넘기는 콜백함수는 return 이전에 정의되며, 이벤트에 걸리는 이벤트 리스너는 인자로 해당 synthetic event를 받을 수 있다.

결론!