ReactJs - state

 

state

 

 

 

React는 컴포넌트를 외부에서 조작할 때는 props를 내부적으로 상태를 관리할 때는 state를 사용한다.

 

 

 

 

 

 

 

기본 state의 개념

 

 

 

App.js

mport React, {Component} from 'react';
import Subject from "./component/Subject"
import './App.css';

class App extends Component {
    constructor(props){ //class안에서는 constructor의 함수는 생성자 함수이다.
        super(props); //super 메소드는 App 자신의 부모 Component에게 props라는 인자를 넘겨준다.
        this.state = { // super 메소드 이후 나오는 this도 부모의 함수안의 this울 가르킨다.
            subject:{title:'WEB_state TEST', sub:'Hi my name is jin seok'}
            //state을 연동시키기 위한 props 형식 데이터 가진 subject 객체 생성
        }
    }
  render (){
return (    

    //props로 state 데이터인 title,sub의 값을 선언해줌. subject 객체값 가져온다.
    <div className="App">
      <Subject title={this.state.subject.title} 
       sub={this.state.subject.sub}></Subject>
    
    </div>
    
  );
 }
}



export default App;

 

 

 

 

 

 

 

응용 state

 

 

 

 

App.js

 

import React, {Component} from 'react';
import Subject from "./component/Subject"
import TOC from "./component/TOC"
import Content from "./component/Content"
import './App.css';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            subject:{title:'WEB_state TEST', sub:'Hi my name is jin seok'},
            contents:[ //state 데이터를 위한 contents 배열 데이터 추가
            {id:1, title:'HTML_TEST', desc: 'HTML is HyperTest.'},
            {id:2, title:'CSS_TEST', desc: 'CSS is for design.'},
            {id:3, title:'JavaScript_TEST', desc: 'JavaScript is interactive.'}
            
            ]
        }
    }
  render (){
return (    
    
    <div className="App">
  <Subject title={this.state.subject.title} 
  sub={this.state.subject.sub}></Subject>
 <TOC data={this.state.contents}></TOC> <!--props로 위에서 만든 contents 배열 데이터를 연동시킨 state 데이터 추가-->
  <Content title="HTML" desc="HTML is HyperTest Markup Language."></Content>
    
    </div>
    
  );
 }
}



export default App;

 

 

 

TOC.js

import React, {Component} from 'react';


class TOC extends Component {
/// 아래와 같이 App.js에서 만든 this.state의 배열 데이터가 아래 변수 data에 담겼다.
    render (){
       var lists = [];    
       var data = this.props.data; 
        var i = 0;
        while(i< data.length){
            lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
                                   //state을 이용하여 <TOC>의 <li>들의 리스트 데이터 구현
            i = i+ 1;
        }
  return (

    <nav>
    <ul>
        {lists} <!--위에서 반복문으로 담긴 <TOC> 리스트 데이터를 담은 변수 lists을 여기에다 선언-->
        
        </ul>
    </nav>
       
      
  );
}
}
export default TOC;

 

 

 

 

 

아래와 같이 state을 이용한 연동으로 각자 분리되어 있어도 하나로 연동되어 있어 웹 페이지 결과는 그대로 나온다.