[react]13-Hooks:レンダリングアレイ

import React from "react"
// App <- ArrayRender <- User

function User ( {user} ) {

    console.log({user})
    // {user : {id: 1, username: "jungeun", email: "[email protected]} }
    // {user : {id: 2, username: "delilah", email: "[email protected]"}}
    // {user : {id: 3, username: "liz", email: "[email protected]"}}

    return (
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    )
}


function ArrayRender() {

    const users = [
        {
          id: 1,
          username: 'jungeun',
          email: '[email protected]'
        },
        {
          id: 2,
          username: 'delilah',
          email: '[email protected]'
        },
        {
          id: 3,
          username: 'liz',
          email: '[email protected]'
        }
      ];

    return (
        <div>
            { users.map( u => <User user={u} key={u.id} /> ) } 
            {/* 여기서의 u는 배열 users의 각 인덱스의(0번째부터 n번째까지의) element 가 된다. */}
            {/* 첫번째 u에는 {id:1, username:"jungeun", email:"[email protected]"}이 들어가며 */}
            {/* 순서대로 u에 하나씩 들어간다. */}
            {/* 따라서 하나씩 순서대로 User 컴포넌트의 user props의 값으로 들어간다. */}
            {/* 그 다음 User 컴포넌트의 리턴에서 하나씩 렌더링된다. */}
        </div>
    )
}

export default ArrayRender;


//! map( ->map 함수의 파라미터로는 변화를 주는 함수가 온다 )
// 동적인 배열을 렌더링해야 할 때, js 배열의 내장함수 map() 을 사용한다.
// 또한!!
// 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 한다.
// key 값은 고유한 값이어야 한다.