[ React ] Warning: Each child in a list should have a unique "key" prop. 오류 해결 방법

💥 React 실행 후 발생한 에러 메시지

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.

Error image

❓에러 발생 이유

React의 리스트 엘리먼트 요소에 key 값이 없어서 발생하는 오류입니다.
React는 가상 DOM을 사용하여 Diffing 작업을 수행합니다.
하지만 key 값이 없으면 각각의 리스트 요소를 구분할 수 없기 때문에 발생하는 오류 에러 메시지입니다.
참고로 key 값은 유니크해야 합니다.

 

추가로 아래는 React 공식문서로 key에 대한 설명글입니다.

https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Rendering Lists – React

 

✅ 해결 방법

• 각 요소에 key 속성을 추가시켜줍니다.

이전 코드

render() {
    return(
        <div className="container">
            <div className="todoBlock">
                <div className="title">
                    <h1>할 일 목록</h1>
                </div>

                {this.todoData.map((data) => (
                    <div style={this.getStyle()}>
                        <input type={"checkbox"} defaultChecked={false}/>
                        {data.title}
                        <button style={this.btnStyle}>x</button>
                    </div>
                ))}
            </div>
        </div>
    )
}

 

수정 코드

render() {
    return(
        <div className="container">
            <div className="todoBlock">
                <div className="title">
                    <h1>할 일 목록</h1>
                </div>

                {this.todoData.map((data) => (
                    <div style={this.getStyle()} key={data.id}> // key prop 추가
                        <input type={"checkbox"} defaultChecked={false}/>
                        {data.title}
                        <button style={this.btnStyle}>x</button>
                    </div>
                ))}
            </div>
        </div>
    )
}

 

전체 코드

App.js

import React, {Component} from 'react';
import "./App.css"

export default class App extends Component {
    btnStyle = {
        color: "#fff",
        border: "none",
        padding: "5px 9px",
        borderRadius: "50%",
        cursor: "pointer",
        float: "right"
    }

    getStyle = () => {
        return {
            padding: "10px",
            borderBottom: "1px #ccc dotted",
            textDecoration: 'none'
        }
    }

    todoData = [
        {
            id: "1",
            title: "공부하기",
            completed: true
        },
        {
            id: "2",
            title: "청소하기",
            completed: false
        },
    ]

    render() {
        return(
            <div className="container">
                <div className="todoBlock">
                    <div className="title">
                        <h1>할 일 목록</h1>
                    </div>

                    {this.todoData.map((data) => (
                        // key prop 추가
                        <div style={this.getStyle()} key={data.id}>
                            <input type={"checkbox"} defaultChecked={false}/>
                            {data.title}
                            <button style={this.btnStyle}>x</button>
                        </div>
                    ))}
                </div>
            </div>
        )
    }
}