crypto.randomUUID 적용

고유한 값인 id 는 절대 같은 값이 들어가서는 안된다.

고유한 값을 가지고 리액트가 어떤 요소가 변경됐는지 확인하기 때문이다.

 

이번에 todo list 개발 후 코드리뷰를 받았던 내용 중 id 값에 crypto.randomUUID 를 적용하였다.

 

기존에는 id 값으로 처음엔 0 을 주고 그 이후에는 데이터의 마지막 배열의 id 값을 가져와서 +1 하는 식으로 하였다.

 

[수정 전]

export default function AddTodo() {
  const [title, setTitle] = useState('');
  const [contents, setContents] = useState('');
  const [id, setId] = useState(0); //수정 전
  const [data, setData] = useState([]);
  
  	 ....생략
     
     
//수정 전
    let newId = id;
    if(data.length > 0){
      newId = data[data.length-1].id + 1;
    }else{
      newId = newId + 1;
    }

    ....생략
}

 

 

 

[수정 후]

export default function AddTodo() {
  const [title, setTitle] = useState('');
  const [contents, setContents] = useState('');
  const [id, setId] = useState(''); //수정 후
  const [data, setData] = useState([]);
  
  	 ....생략
     
     
//수정 후
    let newId = crypto.randomUUID();
    
    ....생략
}

 

결과 화면

 

 

왼쪽 props 부분에 id가 길게 들어가는 것을 볼 수 있다.