[생활코딩] key

 

생활코딩 https://www.youtube.com/watch?v=sAFNZuzFEPo

 

state를 더 사용해보자.

이전에 사용했던 state는 subject라고 하는 property에 값이 하나였는데, 여러개의 값을 다룰 때는 방법이 달라진다.

TOC 안에있는 데이터를 App의 내부 state를 TOC에 주입함으로써 데이터가 자동으로 바뀌게 할 것이다.

 

contents라는 property를 state에 추가한다.

 

constructor(props){
    super(props);
    this.state={
      subject:{title:'WEB',sub:'world wide web!!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is HyperText ...'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }

 

contents에 담겨있는 배열을 TOC에 주입하기 위해 사용하는 쪽에 코드를 바꾼다.

data라는 props로 this.state.contents를 주입시켜준다.

 

<TOC data={this.state.contents}></TOC>

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>
    );
  }

 

 

 

import React, {Component} from 'react';

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

  export default TOC;

 

이제 더이상 data가 변경되었다 해도 TOC.js 파일을 열어 로직을 변경하지 않아도 된다.

 

이러한 에러가 뜨는데 이유는

각 list 항목들은 key 라는 props 를 가지고 있어야한다.

여러개의 목록을 자동으로 생성할 때에는 이 코드를 추가한다.

각 목록을 다른 것들과 구분할 수 있는 식별자 코드라고 생각하면 된다.lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)

 

import React, {Component} from 'react';

class TOC extends Component{
    render(){
        var lists =[];
        var data = this.props.data;
        var i =0;
        while(i < data.length){
            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;