lodash 이용해서 프론트에서 고유한 id 만들기

프론트로만 작동하는 페이지를 하나 만들고 있다.

 

그런데 배열을 매핑할때 key를 index로 하다보니 없는것과 마찬가지이다.

(이유) 

key에 인덱스를 사용하는 것은 최후의 수단이다.
 
예를들면 인덱스를 사용했을때는 댓글 삭제, 작성처럼 항목들이 재배열되는 경우 오히려 성능이 저하된다고 한다.

 

프론트에서 어떻게 고유id를 만들까 검색하다가 lodash에 uniqueId()가 있는것을 알게 되었다.

(lodash는 debounce용으로 설치해둔 라이브러리였음)

 

 

초기 state를 다음과 같이 작성하고,

const [purchases, setPurchases] = useState<Purchases>([
    {
      id: uniqueId(),
      product: "과자",
      price: "2000",
    },
    { id: uniqueId(), product: "사탕", price: "3000" },
  ]);

 

항목이 추가될때 onClick에서 다음과 같이 작성해주니

 <button
      onClick={() =>
        setPurchases([
          ...purchases,
          ...[{ id: uniqueId(), price: "0", product: "" }],
        ])
      }
    >
      +
    </button>

 

 

각 인덱스의 고유한 값이 생성이 되었다.