찾아주셔서 감사합니다. 구독과 공감/댓글에 힘이 납니다. 행복하세요^^

첨엔 몰랐는데 크롬웹에서 개발자 도구를 열어보니 아래 같은 경고가 주르륵 뜨고 있습니다.

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

Check the render method of `SnmpVendor`. See https://reactjs.org/link/warning-keys for more information.
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:15919:31)
    at SnmpVendor (http://localhost:3000/static/js/main.chunk.js:890:3)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:82625:75)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:86050:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:86252:29)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:85685:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:85305:35)
    at div
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:82338:20)
    at App

키가 중요하지 않는 컴포넌트들이라 어떻게 처리해야할지 고민 하던중에

유니크한 난수값을 주면 어떨까 해서 찾아보니 uuid() 라는 것을 사용하면 된다고 합니다.

$ npm install uuid

사용할땐 uuid 를 임포트 해주고, 사용할 컴포넌트에 추가해주면 됩니다.

import { v4 as uuidv4 } from 'uuid';

const valCount = loading ? (<div>loading...</div>) : (

    vendorCnt.map(item => (

      <Typography key={uuidv4()} variant="body2"> 샘플 </Typography>

    ))

  )