[콘솔 경고] Warning: Each child in a list should have a unique "key" prop.

배경

Warning: Each child in a list should have a unique "key" prop.

antd의 <Table dataSource={data} rowKey={(render)=> render.id} /> 컴포넌트를 사용하는 페이지에서 위와 같은 콘솔 경고가 발생했다.
이 Table은 api에서 넘겨받는 data에 맞게 동적으로 행(row)을 생성한다.

에러 코드 확인

• Understanding unique keys for array children in React.js
  -> 예시 코드: http://jsfiddle.net/1khqfLgr/2/

list 컴포넌트 안에 있는 children 컴포넌트들은 각자 고유한 key값을 가져야만 한다.
이는 Table 컴포넌트도 예외가 아니기 때문에 각 행은 고유한 key값을 가져야 한다.
하지만 이를 처리해주는 rowKey={(render)=> render.id}가 이미 들어가 있었다. 따라서 근본적인 원인을 다시 파악해야 했다.

해결

api에서 넘겨받은 값으로 data 값이 변동되기 전에 렌더링되어 발생하는 에러였다.
useState는 비동기 함수라 이런 문제가 자주 발생하는 것 같다.
이때는 data 초기값을 null로 두고 조건부 렌더링을 하면 된다고 배웠지만,
코드 어딘가에서 또 다른 에러가 발생했다...😭 ( ex -data.map을 사용할 경우)
그래서 차선책으로 data.length를 사용하였다.

return (
  <>
    ...
    {
      data.length && <Table dataSource={data} rowKey={(render)=> render.id} />
    }
  </>
);

해결!✨