State 개발

State

제품을 조작하는 입장과 구현자의 입장이 있다.

Props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 읽기 전용

State : 컴포넌트 내부에서 선언하며 내부에서 값 변경을 가능.  컴포넌트 내부적으로 사용하는 정보.

         예를들면 제품의 전선 등 밖에서 보여서 안되는 물건을 뜻한다.

 

첫번째로 어떠한 컴포넌트가 실행 될 때 render 함수보다 먼저 실행되면서 컴포넌트를 초기화 시켜주고 싶은 코드는 

  constructor(props){
    super(props);
    
  }

 해당하는 코드블럭 안에 작성한다.

App.js의 state로 선언된것을 하위 props에서 불러오는것은 아래 코드처럼 가능하다.

class App extends Component {
  constructor(props){
    super(props);
    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>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

 

Key

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: 'JS is for interactive'}
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <Subject
          title = {this.state.subject.title}
          sub= {this.state.subject.sub}></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content></Content>
      </div>
    );
  }
}

export default App;

 

TOC.js

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;