react에서 반복문 사용하기

• 영화 정보 여러 개 올리기

const movies = [
  {title: 'Harry Potter1', year: 2001},
  {title: 'Harry Potter2', year: 2002},
  {title: 'Harry Potter3', year: 2003},
  {title: 'Harry Potter4', year: 2004},
]
return (
  <div className="App">
    <h1>Movie list</h1>
    <div className="movie">
      <div className="movie-title">{movies[0].title}</div>
      <div className="movie-year">{movies[0].year}</div>
    </div>
    <div className="movie">
      <div className="movie-title">{movies[1].title}</div>
      <div className="movie-year">{movies[1].year}</div>
    </div>
    <div className="movie">
      <div className="movie-title">{movies[2].title}</div>
      <div className="movie-year">{movies[2].year}</div>
    </div>
    <div className="movie">
      <div className="movie-title">{movies[3].title}</div>
      <div className="movie-year">{movies[3].year}</div>
    </div>
  </div>
);

시리즈 별 영화 정보를 올리고 싶을 때 같은 문장을 반복해서 나열해서 사용하게 됩니다. 만약 예시처럼 4개가 아니라 무수히 많은 데이터를 사용하고자 할 때 매번 모든 문장을 다시 쓰기는 불가능합니다.

또한 많은 데이터를 관리할 때 변경할 사항이 생긴다면 일일히 모든 코드를 고치기에는 너무 많은 시간이 들고 오류도 생길 수 있습니다. 이를 편리하게 사용하기 위해 반복문을 사용합니다.

map()

map() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const movies = [
  {title: 'Harry Potter1', year: 2001},
  {title: 'Harry Potter2', year: 2002},
  {title: 'Harry Potter3', year: 2003},
  {title: 'Harry Potter4', year: 2004},
]
const renderMovies = movies.map(movie => {
  // JSX format
  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>
);

map 함수가 배열 movies의 각각의 요소를 모두 돌면서 원하는 값을 리턴합니다. 이때, JSX 카드 형식으로 리턴합니다. movie[0]처럼 인덱스를 사용하지 않고 movie가 각각의 요소들을 가르킵니다.

위 코드로 실행시켰을 때 console창에 아래와 같은 에러가 뜨게됩니다. 이를 해결하기 위해서 map 함수를 사용할 때 key 속성을 넣어주어야 합니다.

• key prop

key 속성은 이후 데이터가 추가되거나 삭제, 변경할 때 react가 어떤 아이템인지 식별할 때 도움을 주는 역할입니다.

// unique한 key가 필요합니다
<div className="movie" key={movie.title}>
  <div className="movie-title">{movie.title}</div>
  <div className="movie-year">{movie.year}</div>
</div>

보통 데이터 베이스에서 데이터를 가져올 때, id가 unique한 값이기 때문에 대부분은 id값으로 key를 정해줍니다. 하지만, 위의 예시에서는 id가 없기 때문에, unique한 영화 이름(movie.title)을 key로 넣어줍니다.

컴포넌트 적용(props로 데이터 전달)

영화 정보를 보여주는 컴포넌트를 작성한 후, props를 사용해 컴포넌트로 데이터를 전달해줍니다.

import React from 'react';

const Movie = (props) => {
    return (
        <div className="movie">   
            <div className="movie-title">{props.movie.title}</div>
            <div className="movie-year">{props.movie.year}</div>
        </div>
    );
};

export default Movie;

movie 데이터를 props로 전달받아 사용합니다.

주의!

리턴을 JSX형태로 하려면 React를 import해야합니다.

import Movie from './components/Movie';

const renderMovies = movies.map(movie => {
  return (
    <Movie movie={movie} key={movie.title}/>
  );
});

return 부분에 Movie 컴포넌트를 사용하고 props 전달을 위해 movie={movie}를 넣어줍니다. movie라는 이름으로 movie 데이터를 전달합니다. key 설정은 컴포넌트를 사용할 때 넣어줍니다.