1. State

constructor(props) {
    super(props);
    this.state={
      subject:{title:'WEB', sub:'World!wide Web'}
   }
}

• constructor() : state값을 초기화하여 컴포넌트 내에 들어갈 값을 세팅하며 render()함수 전에 적어준다.
• this.state = : state의 값을 초기화하는 역할을 한다. 이 코드에서는 subject의 값을 state화 할 것이기 때문에 그 부분을 적어준다.
• 상위 컴포넌트의 state 값을 하위 컴포넌트의 props로 전달하는 것은 얼마든지 가능하다.
• 내부적으로 어떻게 코드가 작동하는 지 숨기기 위해서 사용된다.
• state는 mutable하다.

1. 여러개의 State

[App.js 파일]

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      contents:[
        {id:1, title:'HTML', desc:"HTML is for information"},
        {id:2, title:'CSS', desc:"CSS is for design"},
        {id:3, title:'JS', desc:"JS is for interactive"},
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <TOC data={this.state.contents}/>
      </div>
    )
  }
}

• 1번과 마찬가지로 contents 라는 이름의 state를 생성한 후, 그 안에 값을 넣는다. 주의할 것은 이번에는 여러 개를 추가하기 때문에 id 를 꼭 설정해주도록 한다.

[TOC.js 파일]

import React, { Component } from 'react';
class TOC extends Component {
    render() {
      let lists = [];
      let data = this.props.data
      let 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;

• 이번에는 여러개를 만들기 때문에 lists라는 배열을 선언하고, while문을 통해서 data에 있는 모든 값을 lists라는 배열에 넣고 해당 lists를 리턴한다. push를 할 때 id를 통해 값을 하나씩 넣어주고 있는 것을 볼 수 있다.
• key를 설정하지 않으면 오류 메시지가 나기 때문에 아까 설정해준 id를 key값으로 이용하도록 한다.

1. State를 사용하는 방법