react state소개 및 사용

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

class App extends Component {
  //state 초기화
  //컴포넌트가 실행될때 constructor이 있다면 제일먼저 실행되어서 초기화를 담당한다.
  constructor(props){
    super(props);
    //subject state값을 만듬
    this.state = {
      subject:{title:'WEB', sub:'World Wide Web!'}
    }
  }

  render(){
    return (
      <div className="App">
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}>
        </Subject>
        <Nav></Nav>
        <Article title="Html" sub="Html is HyperText Markup Language."></Article>
      </div>
    );
  }
}

export default App;

컴포넌트가 실행될때 constructor을 만나면 제일먼저 실행되어서 초기화를 담당한다.

state 생성은 this.state = {subject: {title:'WEB', sub:'World Wide Web!'}

state 사용은 <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>

- state 더 잘사용해보기

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

class App extends Component {
  //state 초기화
  //컴포넌트가 실행될때 constructor이 있다면 제일먼저 실행되어서 초기화를 담당한다.
  constructor(props){
    super(props);
    //subject state값을 만듬
    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>
        <Nav data={this.state.contents}></Nav>
        <Article title="Html" sub="Html is HyperText Markup Language."></Article>
      </div>
    );
  }
}

export default App;

src>App.js

nav영역의 목록데이터를 state로 사용하려면 constructor의 contents: [...] 항목추가

<Nav data={this.state.contents}></Nav>로 위의 state와 연결

import React, { Component } from 'react';

class Nav extends Component {
  render(){
    var lists = [];
    var data = this.props.data; //App.js state contents 값
    var i = 0;
    //while 반복문
    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 Nav;

src>component>Nav.js