[React.js] 컴포넌트 State

State란

컴포넌트의 기본적인 동작을 바꾸기 위해 속성인 props 이용하여 사용자가 조작할 때,

이 props값에 따른 내부의 구현에 필요한 데이터

 

→ 컴포넌트가 좋은 부품이 되기위해서는 외부의 props 와 내부의 state가 철저히 분리되어있어야 함

 

*정리

props -  사용자가 컴포넌트를 사용하는 입장에서의 데이터

state - props값에 따란 내부의 구현에 필요한 데이터

 

※ 자세한 내용 참고

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

 

State 사용 예제

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 title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}

▷ App.js

▶ 컴포넌트가 실행될 때 가장 먼저 실행되어 초기 state를 지정하는 constructor 추가

▶ 항상 props로 기본 constructor 호출

▶ render() 메서드 안의 해당 state data로 변경하여 추가(Subject 태그)

 

State 사용 예제2

- state는 다양한 독립적인 변수 포함 가능

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:'HTML 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>
        <TOC data={this.state.contents}></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}

▷ App.js

▶ 리스트 형태의 contents 를 state에 추가

▶ render() 메서드 안의 해당 state data로 변경하여 추가(TOC 태그)

 

class TOC extends Component {
    render() {
      var list = [];
      var data = this.props.data; // 내부적으로 this.props.data 값을 갖고있음
      var i = 0;
      while(i < data.length) {
        list.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
        i = i + 1;
      }

      return (
        <nav>
              <ul>
                  {list}
              </ul>
          </nav>
      );
    }
}

▷ TOC.js

▶ 내부적으로 갖고있는 props.data 를 가져와 사용

▶ 추가적으로 key 값 입력 

 

* 생활코딩 React-15.1, React-15.2, React-15.3 강의 기반으로 작성됨