[Kossie Coder] map을 이용한 리액트 반복문

// App.js

import React from 'react';
import './index.css';
function App() {
  const movies = [
    { title: 'Lami1', year: 2001 },
    { title: 'Lami2', year: 2002 },
    { title: 'Lami3', year: 2003 },
  ];
  const renderMovies = movies.map((movie) => {
    return (
      <div className="movie" 🌟key={movie.title}🌟> // map을 이용할 때는 유니크한 키 필요
        <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;

// index.css

.movie {
  display: flex;
  align-items: center;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}

.movie .movie-title {
  flex-grow: 1;
}

.movie .movie-year {
  font-size: 0.5rem;
  color: red;
}

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */