React 에러 (Warning: Encountered two children with the same key)

Question

{ console.log(movies) } { movies.map((movie) => ( )) }

안녕하세요, 리액트 공부중 에러 맞닥뜨려 질문좀 드립니다.일단 상황은 영화 API를 가져와 영화 목록을 보여주는 페이지에서최하단 스크롤시 추가로 다음 페이지의 영화 api를 불러와 계속해서 보여주는 그런 코드를 짜고 있습니다.그런데 콘솔창을 확인해보니 제목대로Warning: Encountered two children with the same key 에러가 표시됩니다. 자식 요소들이 같은 키를 가진다네요.이유를 몰라 처음에는 내의 key 속성을 지웠으나, 지우니 페이지는 성공적으로 로드가 되나 Each child in a list should have a unique "key" prop. 라는 에러가 나오더라구요. 이건 찾아보니 map 함수를 사용할때 자식 요소들은 반드시 key 속성을 가져야한다길래 추가해줬습니다..이제 중복키 해결을 해야하는데 api로 불러온 고유한 영화 id를 key 값으로 지정해줬기에 중복될 일이 없다고 생각하는데 어떤게 문제인가요?

월급은나의빛 · Answer

실제로 movie.id에 중복이 있을 겁니다. 다음과 같이 array.map() 함수가 제공하는 array index 매개변수를 사용하면 same key warning은 사라지지 않을까요?

{ console.log(movies) } { movies.map((movie, i) => ( )) }

jeoyjng1 · Answer

리액트에서 Warning: Encountered two children with the same key 경고는 key 속성이 중복될 때 발생합니다. API에서 고유한 영화 ID를 key로 사용했다고 하더라도, 다음과 같은 상황에서 문제가 발생할 수 있습니다:1. API 데이터 중복API가 잘못된 데이터를 반환하거나, 동일한 영화를 여러 번 반환하는 경우가 있을 수 있습니다.확인 방법:API 응답 데이터를 확인해 같은 id가 있는지 살펴보세요.예를 들어, API 응답을 콘솔로 출력해서 확인:javascriptCopy codeuseEffect(() => { console.log("Fetched movies:", movies); // movies 데이터를 확인 }, [movies]);2. key 값이 배열의 인덱스를 포함하는 경우고유한 영화 ID 외에 배열의 인덱스도 포함된 형태로 key를 지정했다면, 데이터가 업데이트되면서 중복 키 문제가 발생할 수 있습니다. 예시:javascriptCopy codemovies.map((movie, index) => ( ));여기서 id와 index를 합쳤지만 id가 중복된 상태라면 여전히 경고가 뜰 수 있습니다.해결 방법:단순히 movie.id만을 key로 사용하세요:javascriptCopy codemovies.map((movie) => ( ));3. 중복된 상태로 새로운 데이터가 추가무한 스크롤을 구현할 때, 새롭게 데이터를 추가하는 과정에서 기존 데이터와 병합이 잘못되었을 수 있습니다. 예를 들어:javascriptCopy codesetMovies((prevMovies) => [...prevMovies, ...newMovies]);만약 newMovies에 prevMovies에 이미 포함된 데이터가 있다면, 중복된 key가 생길 수 있습니다.해결 방법:데이터를 추가하기 전에 중복 제거를 수행하세요:javascriptCopy codesetMovies((prevMovies) => { const allMovies = [...prevMovies, ...newMovies]; const uniqueMovies = Array.from(new Set(allMovies.map((movie) => movie.id))) .map((id) => allMovies.find((movie) => movie.id === id)); return uniqueMovies; });4. 고유하지 않은 IDAPI의 id 필드가 고유하지 않은 경우가 간혹 있습니다. (특히, 외부 API라면 더욱 그렇습니다.) 확인 방법:API 응답에서 id 필드가 고유한지 확인해보세요.만약 고유하지 않다면, 대체 방법을 사용하세요:javascriptCopy codemovies.map((movie, index) => ( ));5. 비동기 상태 업데이트 충돌무한 스크롤 구현 중 비동기 호출로 인해 같은 페이지 데이터를 중복으로 가져오는 경우가 있습니다. 확인 방법:API 호출 상태를 관리하고, 중복 호출을 방지하세요:javascriptCopy codeconst [isFetching, setIsFetching] = useState(false); const fetchMovies = async () => { if (isFetching) return; // 중복 호출 방지 setIsFetching(true); const response = await getMoviesFromAPI(); // API 호출 setMovies((prevMovies) => [...prevMovies, ...response.data]); setIsFetching(false); };결론key 관련 문제는 데이터 중복이나 key 속성 정의 방식에서 주로 발생합니다. 위에서 제시한 확인 방법으로 하나씩 점검해보세요. 일반적으로 API 응답 중복 확인과 key 속성의 고유성 보장으로 대부분의 문제가 해결됩니다. 😊by ChatGPT

React 에러 (Warning: Encountered two children with the same key)

2개의 답변

Q&A 목록