2021.02.09 / React - key

생활코딩 15.3강 - key

 

state라고 하는 내부정보를 사용하고 자식에게 전달할 때는 props를 통해 전달한다.

리스트 항목을 쓸 때는 key를 사용한다.

이렇게 state와 props를 사용하면 데이터를 수정할 때 파일을 열지 않아도 바로 쓸 수 있다.

 

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject:{title:'WEB', sub:'World wide web!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }
  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>
    );
  }
}

 

TOC.js

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 += 1;
      }
      return (
        <nav>
            <ul>
                {lists}
            </ul>
        </nav>
      );
    }
  }

export default TOC;

 

 

참고

- www.youtube.com/watch?v=sAFNZuzFEPo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=18