[React] Key Warnings 해결 방법

Map함수를 사용하여 반복되는 컴포넌트 혹은 JSX 요소 들을 랜더링 하다 보면

key Warning라는 오류가 콘솔창에 뜨는 것을 자주 볼 수 있다.

 

예시

import React from 'react';
import './App.css';

function App() {
    const iter = [0,1,2]
    return (
        <div>
        {
            iter.map(item => <h1>item</h1>)
        }
        </div>
    )
}


export default App;

해당 소스 코드 입력 후 localhost:3000에 접속하면 개발자 도구(F12)에 이미지와 같은 오류가 뜨는 것을 확인할 수 있다.

 

에러를 간단히 읽어보면 유니크한 key가 필요함을 알 수 있다.

div 안에 iter.map 부분을 아래와 같이 바꾸면 에러가 사라진다.

iter.map(item => <h1 key={item}>item</h1>)

 

 

왜 리액트는 key를 사용자가 수동으로 선언을 해야 하나?

virtual DOM이 업데이트 되어 지는 로직을 구별하기 위해서 사용자에게 직접적으로 key에 대해서 입력하게 요구한다.

 

** 매우 중요 **

virtual DOM 을 통해 리액트가 업데이트를 하는데 업데이트를 리액트가 실제로 자체적으로 하는 것이 아니라 사용자에게 어떤 분기점, 어떤 조건에서 업데이트 하는 지를 세팅할 수 있는 기회를 제공하기 위해서 수동으로 key를 설정.

즉 사용자가 실제로 어느 시점에 virtual DOM을 업데이트 하는지 사용자가 실제로 설정할 수 있는 기회를 제공한다.

 

실제 코드에서 일어나는 대표적인 잘못된 예

 

map의 index를 활용하여 key를 지정해 주는 사례들이 있다.

예 ) iter.map((item, index) => <h1 key={index}>item</h1>)

언뜻 보기에는 index가 고유한 값을 가지기 때문에 특별한 문제가 없어 보인다.

하지만 똑같은 iterration이 여러 개여서 재사용되는 컴포넌트가 계속 사용되다 보면

UI 컴포넌트 안에 인덱스가 계속 반복되게 되고 인덱스 고유 값이 깨지게 된다.

고유 값이 깨지게 되는 이유는 map 안에 들어오는 function들은 비동기적으로 실행되기 때문이다.

즉 현재 포스트의 예시처럼 아주 단순한 문제가 되지 않을 수 있겠지만. 대량의 데이터를 처리를 하는 컴포넌트가 두 개 이상 나오게 되면 우선 순위에 대한 충돌이 발생할 수 있다.

 

안 좋은 예 )

{

iter.map((item, index) => <h1 key={index}>item</h1>)

}

{

iter.map((item, index) => <h1 key={index}>item</h1>)

}

 

{

iter.map((item, index) => <h1 key={index}>item</h1>)

}