[React 리액트] Each child in a list shoul have a unipue "key" prop 오류 해결 방법

Each child in a list shoul have a unipue "key" prop 오류 해결 방법

 

# Each child in a list shoul have a unipue "key" prop.

리액트에서는 여러개의 엘리먼트를 자동으로 생성할 때 생성되는 앨리먼트를 다른 것들과 구분할 수 있도록 식별자(key)를 요구합니다.

 

리액트 내부적으로 필요로 하기 때문에 요청하는 것이기 때문에 여러개의 데이터를 자동으로 생성할 때 유의하시기 바랍니다.

 

아래는 자식 컴포넌트에서 props를 리스트 형식으로 받아 자동으로 엘리먼트 여러개를 while문을 통해 만들고 있습니다.

 

이때<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li> 에서 key(식별자) 값을 주어 에러가 나지 않도록 하였습니다.

import React, { Component } from 'react';

class TOC extends Component{
    render(){
      var lists = [];
      var data = this.props.data; // props로 데이터 읽기
      var i = 0;
      while(i < data.length){ // 길이만큼 반복하며 lists에 push
      
      	// react는 여러개의 데이터를 자동으로 생성할 때 다른 것들과 구분할 수 있는 식별자를 요구합니다.
        // 아래와 같이 key 값을 넣어주도록 합니다.
        lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
        i = i + 1;
      }
      return(
        <nav>
            <ul>
              {lists} // 데이터 출력
            </ul>
        </nav> 
      );
    }
  }

  export default TOC;

 

 

참고

2021.03.29 - [Web/React 리액트] - [React 리액트] 리스트(배열) 데이터 여러 개 출력하는 방법 (props, key)

[React 리액트] 리스트(배열) 데이터 여러 개 출력하는 방법 (props, key)

 

리액트 글 모두 보러 가기

devmoony.tistory.com/category/Web/React%20%EB%A6%AC%EC%95%A1%ED%8A%B8

'Web/React 리액트' 카테고리의 글 목록