프론트엔드/React
리액트 배열형 자료의 랜더링
랼랼
2022. 5. 11. 22:00
배열형 자료의 원소를 나열하기 위해서 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;
결과
반응형