더미데이터 라이브러리 & Warning: Encountered two children with the same key, `2`.

5o_hyun·2023년 6월 12일
0

Warning: Encountered two children with the same key, 2. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

더미데이터로 게시물을 계속 등록할때 id:2로 지정해놔서 반복문이 인식을 못하는 에러이다.
더미데이터로 프론트를 구현하다보면 이와같이 id가 겹치는 현상이 발생된다.

이럴떄 유용한게 shortid와 faker 이다.

  1. shortid : 진~짜 겹치기 힘든 id를 만들어준다.
    npm
    npm i shortid
    이걸로 우선 id가 겹치는 해당 에러를 막을수있다.
id:2, ==> id: shortId.generate(),
  1. faker : 더미데이터들을 쉽게 가져와 쓸수있다.
    npm
    npm i @faker-js/faker
Array(28).fill().map(() => ({
	id : shortId.generate(),
    nickname : faker.person.firstName(),
}))
profile
학생 점심 좀 차려

0개의 댓글