React 경고 문제 해결

제목: React 경고 해결하기: 각 자식 요소는 고유한 “key” 속성을 가져야 함

소개

React를 사용해 작업한 적이 있다면, 다음과 같은 경고 메시지를 본 적이 있을 것입니다: 경고: 배열이나 반복자에서 각 자식 요소는 고유한 "key" 속성을 가져야 함. `App`의 렌더링 메서드를 확인하세요. 이러한 경고는 일반적으로 map 함수를 사용하여 컴포넌트 목록을 렌더링할 때 발생합니다. 하지만 키를 정의해도 경고가 계속 나타납니다. 이 글에서는 이러한 경고가 발생하는 원인을 살펴보고 해결하는 방법을 제시하겠습니다.

문제

경고가 발생하는 코드를 살펴보겠습니다:

import React from 'react';
import Relay from 'react-relay';
import AccountTable from './AccountTable';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>계정 목록</h1>
          {this.props.viewer.accounts.edges.map(edge =>
            <AccountTable key={edge.node.id} account={edge.node} />
          )}
      </div>
    );
  }
}

export default Relay.createContainer(App, {
    fragments: {
        viewer: () => Relay.QL`
            fragment on User {
                accounts(first: 10) {
                    edges {
                        node {
                            ${AccountTable.getFragment('account')}
                        }
                    }
                }
            }
        `,
    },
});

해결 방법 1: 인덱스를 키로 사용하기

가장 쉬운 해결 방법은 맵의 인덱스를 키로 사용하는 것입니다:

{this.props.viewer.accounts.edges.map((edge, i) =>
    <AccountTable key={i} account={edge.node} />
)}

인덱스를 키로 사용함으로써 렌더링된 목록 내에서 고유성을 보장할 수 있습니다. 키는 형제 컴포넌트 간에만 고유해야 한다는 점을 알아두세요.

해결 방법 2: relay 프래그먼트의 하위 id 추출하기

객체를 기반으로 하는 안정적인 id가 있다면 해당 id를 키로 사용하는 것이 좋습니다:

{this.props.viewer.accounts.edges.map((edge) =>
    edge && edge.node && <AccountTable key={edge.node.__id} account={edge.node} />
)}

이 방법은 relay 프래그먼트의 하위 id를 추출하여 목록의 각 요소가 고유한 키를 갖도록 합니다.

결론

React 경고 “각 자식 요소는 고유한 ‘key’ 속성을 가져야 함”은 컴포넌트 목록을 렌더링할 때 자주 발생하는 문제입니다. 이 글에서는 이러한 경고를 해결하기 위해 두 가지 해결 방법을 소개했습니다. 인덱스를 사용하거나 relay 프래그먼트의 하위 id를 추출하여 키의 고유성을 보장할 수 있습니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs