TypeScript | UUID로 고유 스트링 타입 id값 가져오기

처음엔 input에 적는 할 일과 함께 타입이 숫자인 id 를 같이 객체에 담아 활용하려고 했었다.근데 펼침연산자를 또 쓰게 되고,

id를 숫자로 가져오면 +1 이런식으로 넣다보니 복잡해짐을 느끼고 고민하던 끝에 동기 분이 추천해준 uuid 방식을 적용해보게 되었다.

 

 

UUID(Universally Unique IDentifier)

네트워크 상에서 중복되지 않는 id를 만들기 위한 표준 규약이다.

UUID 는 8-4-4-4-12 형태의 문자이고, 각 문자는 16진수 숫자다.

UUID 버전은 1, 3, 4, 5 가 있는데, 랜덤으로 생성되는 4버전이 가장 많이 쓰인다고 한다.

 

 

npm install --save @types/uuid

 

자바스크립트에서는 UUID가 npm 패키지이기 때문에, 설치해준다.

(나는 타입스크립트 컴파일러를 쓰고 있어서 위와 같이 써줌)

 

 

지금 todo-list를 typescript로 만드는 과제를 하고 있는데, UUID로 각각의 todo 리스트마다

string 타입의 id를 붙여주어 map을 돌렸다.

todo 리스트 추가하기 버튼에 addList 라는 함수를 달아주고 map을 돌린 todoList 마다 id 를 붙여주는데

id 값으로 UUID가 오게 해주었다.

import {v4 as uuidv4} from 'uuid'; 
// v4 를 uuidv4 로 쓰겠다.

type 투두리스트낱개 = {
  id: string;//uuid가 스트링 타입이기 때문에 설정
  할 일 밸류: string
}

const uuid = uuidv4();
   //uuidv4함수를 uuid 변수에 저장

set투두리스트목록들([...투두리스트목록들, {id: uuid, 할 일 밸류: 인풋값 }]);
//id 값으로 UUID를 저장한 'uuid' 변수로 지정