[React] (8) Key - Warning: Each child in a list should have a unique "key" prop.

  오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다.

 

App.js

import React, { Component } from 'react';
import TOC from "./components/TOC"
import Content from "./components/Content"
import Subject from "./components/Subject"
import './App.css';

class App extends Component {
// render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다가 짜라
  constructor(props) {
    super(props);
    // 초기화 끝내고 state를 초기화 시킨다.
    this.state = {
      subject: {title: "Web", sub: "World Wide Web!"},
      contents:[
        {id: 1, title: 'HTML', desc: 'HTML is TT'},
        {id: 2, title: 'CSS', desc: 'CSS is AA'},
        {id: 3, title: 'JAVASCRIPT', desc: 'JAVASCRIPT is Hi'}
      ]
    }
  }

  render() {
    return (
    <div className="App">
      <Subject 
        title = {this.state.subject.title} 
        sub = {this.state.subject.sub}>
      </Subject>
      <Subject title="React" sub="For UI"></Subject>
      <TOC data={this.state.contents}></TOC>
      <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
    </div>
    );
  }
}

export default App;

 

 

/component/TOC.js

import React, { Component } from 'react';

class TOC extends Component {
  render() {
    let lists = [];
    let data = this.props.data;
    for(let i = 0; i < data.length; i++) {
      lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    ); 
  }
}

export default TOC;

 

 

결과

 

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

 

---

 

 

오류 메세지 각각의 props항목들은 key를 가지고 있어야한다는 오류메세지이다. for문이나 while문 등으로 자동생성되는 데이터에서 이런 현상이 나타난다. React에서 고유 값이 있어야 사용하기 쉽기 때문이다. 그래서 이것을 고치려면 각 태그에 고유 키를 넣어줘야한다.

 

class TOC extends Component {
  render() {
    let lists = [];
    let data = this.props.data;
    for(let i = 0; i < data.length; i++) {
      lists.push(<li key = {data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    ); 
  }
}

 

이렇게 key 값을 고유한 값으로 지정해주면 된다. 그럼 오류메세지가 뜨지 않는다.