매일 봐도 헷갈리는 반복문과 어레이 작성법
case for the practical use.
function App() {
const movies = [
{ title : 'Chiho', year: 2001 },
{ title : 'Chiho1', year: 2002 },
{ title : 'Chiho2', year: 2003 },
]
function repeat(){
var array = [];
for (var i=0; i < movies.length; i++){
array.push( <div className="movie">
<div className="movie-title">{movies[i].title}</div>
<div className="movie-year">{movies[i].year}</div>
</div>)
}
return array
}
return (
<div className="App">
<h1>Movie List</h1>
{repeat()}
</div>
);
}
export default App;Standard format for array looping.
function NAME() {
var array = [];
for (var i=0; i<array.length; i++) {
array.push(<HTML TAGS>)
}
return array
};Looping using Array map() Method.
function App() {
const movies = [
{ title : 'Chiho', year: 2001 },
{ title : 'Chiho1', year: 2002 },
{ title : 'Chiho2', year: 2003 },
]
const renderMovies = movies.map((movie)=> {
return (
<div className="movie">
<div className="movie-title">{movie.title}</div>
<div className="movie-year">{movie.year}</div>
</div>
)
})
return (
<div className="App">
<h1>Movie List</h1>
{renderMovies}
</div>
);
}
export default App;
Hello,