리액트를 사용하다보면 주로 배열을 이용해 반복문을 돌린다.
예를 들면
const arr = [
{id: 0, name: 'hayeong', age: 27},
{id: 1, name: 'onew', age: 1}
]
const index = () => {
return (
<ul>
{arr.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)
}
이러한 경우다.
당연히 가능하다. Object.keys
를 이용하자.
const obj = {
first: 'hayeong',
second: 'onew'
}
const index = () => {
return (
<ul>
{Object.keys(obj).map(key => (
<li key={key}>{obj[key]}</li>
))}
</ul>
)
}
const keyObj = {
first: [
{id: 0, name: 'hayeong', age: 27},
{id: 1, name: 'onew', age: 1}
],
second: [
{id: 0, name: 'hayeong', age: 27},
{id: 1, name: 'onew', age: 1}
]
}
const index = () => {
return (
<ul>
{keyObj[Object.keys(keyObj)].map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)
}