map() 사용하기
시작하기에 앞서
주의
해당 블로그의 모든 문서는 학습한 내용을 제 방식으로 정리하여 작성하고 있습니다.
순수 창작물도 아니고, 틀린 내용이 있을 수 있으므로 참고하고 읽어주시면 감사하겠습니다.
React map()
function App() {
const todoData = [
{ id: 1, title: "공부하기", completed: true },
{ id: 2, title: "밥 먹기", completed: false },
];
return (
<div>
{todoData.map((todo) => (
<div key={todo.id}>
<input type="checkbox" defaultChecked={todo.completed} />
<span>{todo.title}</span>
</div>
))}
</div>
);
}
export default App;
가장 먼저 map()
함수를 사용하기 위한 배열을 준비합니다.
앞의 예제처럼 배열을 직접 만들어줘도 되고, 서버에서 데이터로 받아와도 됩니다.
function App() {
const todoData = [
{ id: 1, title: "공부하기", completed: true },
{ id: 2, title: "밥 먹기", completed: false },
];
return (
<div>
{todoData.map((todo) => (
<div key={todo.id}>
<input type="checkbox" defaultChecked={todo.completed} />
<span>{todo.title}</span>
</div>
))}
</div>
);
}
export default App;
그리고 자바스크립트에서 map()
을 사용하듯이
리액트에서도 {data.map(data => ( ... ))}
형태로 사용하면 되고,
...
안에서 JSX 문법으로 UI를 작성하면 됩니다.
그리고 데이터에 접근할 땐 중괄호{}로 묶어줘야 합니다.
ex) <span>{todo.title}</span>
key를 사용하는 이유
작성 필요...