리액트 추출

import React from 'react'
function formatDate(date) {
    return date.toLocaleDateString();
}

function Comment(props) {//props가 키 value 를 가지고 있습니다
    return (
        <div className="Comment">
            <div className="UserInfo">
                <img
                    className="Avatar"
                    src={props.author.avatarUrl}
                    alt={props.author.name}
                />
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div>
            <div className="Comment-text">{props.text}</div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'https://placekitten.com/g/64/64',
    },
};


export default function Extraction() {
    return (
        <Comment date={comment.date} text={comment.text} author={comment.author} />
    )
}
//Comment 컴포넌트를 import 합니다, props 로 date, text, author를 줍니다.  comment 는 전역변수입니다

import React from 'react'
function formatDate(date) {
    return date.toLocaleDateString();
}

function Avatar(props) {//user라는 이름에 name이랑 avatarUrl 이 넘어옴
    return (
        <img
            className="Avatar"
            src={props.user.avatarUrl}
            alt={props.user.name}
        />
    );
}
function UserInfo(props) { //name, avatarUrl가 담겨있는 user가 넘어옴
    return (
        <div className="UserInfo">
            {/* name 이랑 avatarUrl이 넘어감 */}
            <Avatar user={props.user} /> 
            <div className="UserInfo-name">
                {props.user.name}
            </div>
        </div>
    );
}

function Comment(props) {
    return (
        <div className="Comment">
            <UserInfo user={props.author} />
            <div className="Comment-text">{props.text}</div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'https://placekitten.com/g/64/64',
    },
};


export default function Extraction() {
    return (
        <Comment date={comment.date} text={comment.text} author={comment.author} />
    )
}