컴포넌트에 key를 할당해도 에러가 나는 문제

문제발생 )

Warning: Each child in an array or iterator should have a unique “key” prop.

• react에서 다음과 같은 에러가 뜨면, key를 할당해 해결해 주면 된다.

movieData.map((movie, index) => (
                <Movie
                  key={index}
                  modalFlagFunc={modalFlagFunc}
                  setModalData={setModalData}
                  movieId={movie.id}
                  movieTitle={movie.title}
                  movieGenres={movie.genres}
                  movieCoverImg={movie.medium_cover_image}
                  movieRating={movie.rating}
                  movieLang={movie.language}
                  movieRuntime={movie.runtime}
                  movieYear={movie.year}
                  movieSummary={movie.description_full}
                />
          ))

하지만 key값을 할당해도 에러가 났으며, 고유한 값으로 index가 아닌 movie.id 값을 할당해도 같은 에러가 떳다.

문제원인 )

감싸는 코드<> </>가 key보다 더 상위로 인식되어서 제대로 인식 되지 않아 발생한 문제였다.
<> 대신 <div> 같은걸로 바꿔서 key를 할당해 주면 해결된다.

• 추측이건데, <> </>를 사용하지 않아도 생략 된 것이기 때문에, 위와 같은 이유로 에러가 나는 것 같다.

문제해결 )

          movieData.map((movie, index) => (
            <div key={index}>
              <Fade>
                <Movie
                  modalFlagFunc={modalFlagFunc}
                  setModalData={setModalData}
                  movieId={movie.id}
                  movieTitle={movie.title}
                  movieGenres={movie.genres}
                  movieCoverImg={movie.medium_cover_image}
                  movieRating={movie.rating}
                  movieLang={movie.language}
                  movieRuntime={movie.runtime}
                  movieYear={movie.year}
                  movieSummary={movie.description_full}
                />
              </Fade>
            </div>
          ))

• <Fade>는 스크롤 애니메이션을 줄 수 있는 컴포넌트형 라이브러리이기 때문에 무시하고 생각하자
  react-reveal 스크롤 애니메이션 공식문서