[React] 리스트 List

const numbers = [1, 2, 3, 4];
const exponentialNumbers = numbers.map(function (number) {
return number * number;
});
console.log(exponentialNumbers);
// [1, 4, 9, 16]

src/App.jsx

import * as React from 'react';
const list = [
{
title: 'React',
url: 'https://reactjs.org/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
},
{
title: 'Redux',
url: 'https://redux.js.org/',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1,
},
];
function App() { ... }

export default App;

리액트엔 jsx로 쉽게 변환하게끔 map 함수가 내장 되어있다.

function App() {
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" />
<hr />
<ul>
{list.map(function (item) {
return <li>{item.title}</li>;
})}
</ul>
</div>
);
}

모든 아이템들은 ID가 존재한다, objectID

function App() {
return (
<div>
...
<ul>
{list.map(function (item) {
return <li key={item.objectID}>{item.title}</li>;
})}
</ul>
</div>
);
}

키의 인덱스를 찾는 방법은 간단하다

<ul>
{list.map(function (item, index) {
return (
<li key={index}>
{/* only use an index as last resort */}
{/* and by the way: that's how you do comments in JSX */}
{item.title}
</li>
);
})}
</ul>

function App() {
return (
<div>
...
<ul>
{list.map(function (item) {
return (
<li key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</li>
);
})}
</ul>
</div>
);
}