[React] Each child in a list should have a unique "key" prop.

⛔ 문제 상황

• 작업 내용

  • 리액트 Todolist 만들기 과제

• 에러 메시지

  
  

• 에러 발생 코드

  <div className='list-container'>
        {todos.map((todo) => {
          if (todo.isDone === false) {
            return <TodoList todos={todos} setTodos={setTodos} />;
          }
        })}
  </div>

---

🔎 원인과 해결

⚠️ 에러 원인

• react에서는 map() 메서드 사용시 배열의 각 Item마다 독립적인 key 값을 설정해야 된다.
• 하지만, 에러가 발생한 코드에서는 key prop과 관련해 세팅을 해주지 않았다.

👉 리액트는 자동으로 생성한 태그의 경우,
리액트가 태그들을 추적해야되는 근거로써 약속된 프롭 key를 부여함으로써 성능을 높여 동작하게 한다.

🔐 해결 방법

• todo 목록이 세팅될 때 key값으로 uuid가 들어가도록 지정
• 각각의 todo li를 화면에 그려주는 작업시 key값도 같이 들어가도록 지정

setTodos([
      ...todos,
      {
        title: input,
        content: content,
        isDone: false,
        key: uuidv4(),
      },
    ]);
------------------------

<div className='list-container'>
      {todos.map((todo) => {
        if (todo.isDone === false) {
          return (
            <TodoList todos={todos} setTodos={setTodos} **key={todo.key}** />
          );
        }
})}

---

🔗 참고

• Each-child-in-a-list-should-have-a-unique-key-prop-해결-방법
• [Warning: Each child in a list should have a unique "key" prop.] 에러 해결