react --props

props============================================
// 값 전달

<script type="text/babel">

function Welcome(props){
    // name="algml"를 props인자를 통해 받음
    return(
            <p>hello {props.name}</p>
    )
}
ReactDOM.render(
    <Welcome name="algml"/>,
    // props를 통해 name="algml"를 Welcome(props)로 전달 
    document.querySelector('#root')
)

</script>

[출력물]

components======================================
// 장점 => 재사용에 용이
*컴포넌트 이름의 첫글자는 항상 대문자로 작성

<script type="text/babel">

function Welcome(props){
    return(
        <>
            <p>hello, {props.name}</p>
        </>
    )
}
function App(){
    return(
        <>
            <Welcome name="mihee"/>
            <Welcome name="algml"/>
            <Welcome name="womaixin"/>
        </>
    )
}
ReactDOM.render(
    <App/>,
    document.querySelector('#root')
)

</script>

[출력물]

컴포넌트 나누기=======================================

// 나누기 전의 코드 => 재사용 어려움
<script type="text/babel">

function Comment(props){
    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>
    )
}
</script>

// 각각의 컴포넌트로 나눈 후 => 재사용에 더욱 용이 
<script type="text/babel">

function Avatar(props){
    return(
        <img className="Avatar"
            src={props.user.avatarUrl}
            alt={props.user.name}
        />
    )
}
function UserInfo(props){
    return(
        <div className="UserInfo">
            <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>
    )
}
</script>