[React] 13 - Hooks : 배열 렌더링

jungeundelilahLEE·2021년 3월 29일
0

React

목록 보기
19/24

goal

  • 리액트에서 배열을 렌더링해보자

ArrayRender.js

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

function User ( {user} ) {

    console.log({user})
    // {user : {id: 1, username: "jungeun", email: "jungeun@gmail.com} }
    // {user : {id: 2, username: "delilah", email: "delilah@example.com"}}
    // {user : {id: 3, username: "liz", email: "liz@example.com"}}

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


function ArrayRender() {

    const users = [
        {
          id: 1,
          username: 'jungeun',
          email: 'jungeun@gmail.com'
        },
        {
          id: 2,
          username: 'delilah',
          email: 'delilah@example.com'
        },
        {
          id: 3,
          username: 'liz',
          email: 'liz@example.com'
        }
      ];

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

export default ArrayRender;


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

0개의 댓글