React기초-5.state2

여러개의 list를 state로 선언 후 하위 컴포넌트에 전달하는 방법.

 

App.js

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

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 HyperText ...' },
        { 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}
        />

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

        <Content title="HTML" desc="HTML is HyperText Markup Language." />
      </div>
    );
  }
}


export default App;

App.js 에서는 TOC 컴포넌트의 data(props)로 정보(this.state.contents)를 전달합니다.

 

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

export default TOC;

TOC 컴포넌트 내부에서는 props의 형태로 받아들인 데이터를 data라는 변수로 받아들이고 이를 활용합니다. 출력할 때에는 while루프에 의해 생성된 lists만 출력하면 결과가 나타납니다. 여러개의 리스트를 생성할 경우 key 값이 필요한 점도 익혀두시기 바랍니다.