[React.js] Kossie Coder - 10강. 리액트 반복문

1. map

import React from "react";

function App() {
	const movies = [
		{title: 'kossie coder1', year: 2001},
		{title: 'kossie coder2', year: 2002},
		{title: 'kossie coder3', year: 2003},
		{title: 'kossie coder4', year: 2004}
	];

	// map을 이용해서 배열의 요소를 반복해서 return 가능하다.
	const renderMovies = movies.map(movie => {
		return (
			// react에서 map을 사용할 때는 반드시 key값이 필요하다.
			// key값은 말 그대로 배열의 각 요소의 고유한 key를 가지면 된다.
			<div className="movie" key={movie.title}>
				<div className="movie-title">{movie.title}</div>
				<div className="movie-year">{movie.year}</div>
			</div>
		);
	});

	return (
		<div className="App">
			{renderMovies}
		</div>
	);
}

export default App;

---

강의 링크

https://youtu.be/OWSxLU-qnTg