배열 렌더링하기

리액트에서 배열을 렌더링해보겠습니다.

UserList.js

import React from 'react'

function UserList() {

    const users = [
        {
            id:1,
            name:'no1',
            phone:`01011111111`,
        },
        {
            id:2,
            name:'no2',
            phone:`01022222222`,
        },
        {
            id:3,
            name:'no3',
            phone:`01033333333`,
        },
        {
            id:4,
            name:'no4',
            phone:`01044444444`,
        },
    ]


  return (
    <div>
        <div>
            <b>{users[0].name}</b>
            <span>{users[0].phone}</span>
        </div>
        <div>
            <b>{users[1].name}</b>
            <span>{users[1].phone}</span>
        </div>
        <div>
            <b>{users[2].name}</b>
            <span>{users[2].phone}</span>
        </div>
        <div>
            <b>{users[3].name}</b>
            <span>{users[3].phone}</span>
        </div>
    </div>
  )
}

export default UserList

컴포넌트를 여러 번 넣는 것은 별로 좋지 않으니 컴포넌트를 재사용 할 수 있도록 새로 만들겠습니다.

한 파일에 여러개의 컴포넌트를 넣을 수 있습니다.

UserList.js

import React from 'react'


function User({user}){
    return(
        <div>
            <b>{user.name}</b> <span>({user.phone})</span>
        </div>
    );
}


function UserList() {

    const users = [
        {
            id:1,
            name:'no1',
            phone:`01011111111`,
        },
        {
            id:2,
            name:'no2',
            phone:`01022222222`,
        },
        {
            id:3,
            name:'no3',
            phone:`01033333333`,
        },
        {
            id:4,
            name:'no4',
            phone:`01044444444`,
        },
    ]


  return (
    <div>
        <User user={users[0]}/>
        <User user={users[1]}/>
        <User user={users[2]}/>
    </div>
  )
}

export default UserList

User 함수의 인자값 user에 users[0],[1],[2]를 넣어준 모습입니다.

위와 같은 방법은 배열의 인덱스를 하나하나 조회하여 하는 방법으로 동적 배열을 렌더링을 하지 못합니다.

동적 배열을 렌더링 해야할때는 map()을 사용합니다.

map()은 배열 안에 있는 원소를 변환하여 새로운 배열을 만드는 자바스크립트 내장 함수입니다.

UserList.js

import React from 'react'


function User({user}){
    return(
        <div>
            <b>{user.name}</b> <span>({user.phone})</span>
        </div>
    );
}


function UserList() {

    const users = [
        {
            id:1,
            name:'no1',
            phone:`01011111111`,
        },
        {
            id:2,
            name:'no2',
            phone:`01022222222`,
        },
        {
            id:3,
            name:'no3',
            phone:`01033333333`,
        },
        {
            id:4,
            name:'no4',
            phone:`01044444444`,
        },
    ]


  return (
    <div>
    {users.map(user=>(<User user={user}/>))}
    </div>
  )
}

export default UserList

User컴포넌트에 user가 들어간 상태로 반환을 합니다.

하지만 리액트는 배열을 렌더링할때 key라는 props를 설정해야합니다.

key값은 각 원소들마다 가지고 있는 고유값으로 설정합니다.
현재 배열에는 id로 설정하면 됩니다.

키값을 설정

	<div>
    {users.map((user,index)=>(<User user={user} key={index} />))}
</div>

만약 배열을 렌더링할 때 key값을 설정하지 않았다면 기본적으로
index 값을 key값으로 사용하게 됩니다.