프론트엔드/React

리액트 배열형 자료의 랜더링

랼랼 2022. 5. 11. 22:00

배열형의 자료는 map을 이용하여 렌더링을 할 수 있다.

 

배열형 자료의 원소를 나열하기 위해서 map()을 이용할 수 있습니다.

마치 Java의 향상된 for문과 같이 사용하여 배열의 원소 객체의 네이밍을 지정하여 사용합니다.

 

{users.map(user=>(
    <User user={user} key={user.id}/>
))}

users라는 자료형의 원소 객체를 user라 지칭하고,

이를 User 컴포넌트에 user에 전달하였습니다.

key는 리액트에서 나열할 떄 사용되는 식별키 속성이며 지정해줘야 하는데,

만약 마땅히 식별키로 지정할만한 데이터가 없다면, 2번째 파라미터인 idx를 사용할 수 있습니다.

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

 

리스트 컴포넌트

import React from "react";

//User 컴포넌트, user의 내용을 출력한다. 
function User({user}){
    return(
        <div>
            <b>{user.userName}</b>
            <span>{user.nickName}</span>
        </div>
    );
}
//List 컴포넌트
function List(){
    //사용할 데이터, id/userName/nickName
    const users=[
        {
            id:1,
            userName : '김첨지',
            nickName : '깍두기'
        },
        {
            id:2,
            userName : '고길동',
            nickName : '홍길동'
        },
        {
            id:3,
            userName : '고감자',
            nickName : '사람임'
        }
    ]

	//맵과 User 컴포넌트 사용하여 users의 원소 출력
    return(
        <div>
            {users.map((user)=>(
                <User user={user} key={user.id}/>
            ))}
        </div>
    )
}

export default List;

결과

배열의 원소가 모두 출력된 모습이다.

반응형