2024. 01 .19 To Do List 여러가지 에러 해결하기

< 첫번째 에러 >

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen.

 

component가 uncontrlloed 상태라고 한다. 

처음에 무슨말인지 몰라 여기저기 콘솔을 찍어봤다. 

 

  const handleAdd = (todo) => {
    setTodos([...todos, todo]);
  };

 

setTodos를 console.log로 바꾸면 에러도 안나고 값을 너무 잘 가져왔다. 

그렇다면 setTodos가 문제인가? 하고 생각을 해봐도 도저히 문제가 없다고 생각했다. 

 

한번더 파고들어서 todos를 만드는게 문제인가? 하고 

안에들어가는 객체의 상태를 변경해주는 또 다른 useState를 보니 초기값이 아무런 값도 없었다. 

 

⬇️

 

초기 값을 설정해 줬더니 조용해졌다..

 

 

 

< 두번째 에러 >

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

각각의 리트에는 유닠한 key가 필요하다고 한다.

그래서 음 하고 봤더니 < ul > 로만 감싸져 있었다.

그래서 < li > 로 한번 더 감싸주었더니 세 번째 에러가 나타났다. 

⬇️

 

 

< 세번째 에러 >

Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>

< li > 는 < li > 안에 존재할 수 없다고 해서 아닌데? 버그인가? 하고 찾아보니 

입력한 값을 뱉어주는 녀석은 < li > 로 잘 감싸져 있었다. 

그래서 벗겨 냈더니 다시 두번째 에러가 발생되었다. 

 

 

< 두번째 에러 >

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

그렇다면 다시 한번 코드를 살펴보자.

분면 key는 uuid를 통해 랜덤한 key를 부여하고 있다.

 

다시 한번 콘솔을 흩뿌려보자..

 

todos를 찍어보면 모든 객체가 나오게 된다.

자 그럼 todos에 있는 객체를 하나씩 가지고 와서 todo.id가 isdone.id와 같으면 isdons 아니면 유지

그런데 todo를 변경했는데 todos를 내놓아라..

 

어떤  key인지 알 수 없을만 했도다.

 

todos를 todo로 변경하면 아쭈아쭈 잘 작동한다!!!