230725 개발일지 TIL - Warning: Each child in a list should have a unique "key" prop.

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

문제원인
각 자식 요소에 고유한 "key" prop을 지정하지 않아서 생긴 메시지이다.

예시1

import { useState } from "react";
import "./App.css";

function App() {
  const [todos, setTodos] = useState(["리액트 공부하기", "아침 운동하기"]);
  const [value, setValue] = useState("");
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button
        onClick={() => {
          setTodos([...todos, value]);
        }}
      >
        추가
      </button>
      {todos.map((todo, index) => {
        return <div key={index}>{todo}</div>;
      })}
    </>
  );
}

export default App;

예시2

import { useState } from "react";
import { nanoid } from "nanoid";
// import "./App.css";

function App() {
  const [todos, setTodos] = useState([
    { id: nanoid(), content: "리액트 공부하기" },
    { id: nanoid(), content: "아침 운동하기" },
  ]);
  const [value, setValue] = useState("");
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button
        onClick={() => {
          setTodos([...todos, { id: nanoid(), content: value }]);
        }}
      >
        추가
      </button>
      {todos.map((todo) => {
        return (
          <div key={todo.id}>
            <span>{todo.content}</span>
            <button
              onClick={() => {
                const newTodos = todos.filter((item) => item.id !== todo.id);
                setTodos(newTodos);
              }}
            >
              삭제
            </button>
          </div>
        );
      })}
    </>
  );
}

export default App;

문제해결
map함수 안에는 key값을 넣어줘야 이와 같은 오류가 발생하지 않는다.

느낀 점
key 속성에 id가 있으면 id를 넣어주면 된다.