생활코딩 react (15-State 소개 및 사용)

# React-15.1. State 소개

 - state, props

 - 사용자가 조작하는 부분 (props) : 유저 인터페이스(버튼, 터치스크린 등)

 - 구현자가 조작하는 부분 (state) : 상태

 - 컴포넌트 사용 : props (사용자가 조작하는 속성), state (컴포넌트가 내부적으로 관리하는 정보)

 > state를 알아보며 props도 이해하자

 

# React-15.2. State 사용

 - App > Subject : props 하드코딩 > state로 전환하여 개선하자

<!-- 하드코딩된 props 값 : "WEB2","React JSX." -->
<Subject title="WEB2" sub="React JSX."></Subject>

 - 생성자(constructor)를 이용해 state 값을 정의하고 초기화한다.

 > 컴포넌트가 실행될때 render()를 실행하기 전에 constructor를 실행하여 컴포넌트 초기화를 담당함

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

 - 생성자에서 정의한 state를 이용하여 Subject 컴포넌트의 props 정보를 정의한다.

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

 - App을 호출하는 index에서는 App의 state정보를 알지 못한다.(알 필요가 없고, 알아서도 안된다.)

 - 상위컴포넌트(App)에서 정의한 state 값은 하위컴포넌트(Subject)에서 사용(전달)할 수 있다.

 

# React- 15.3. key

 - TOC 의 내용을 App의 state를 이용하여 변경할 수 있도록 개선

 - App의 생성자에서 TOC에 전달할 속성 정의

this.state = {
  subject : {title:"WEB0", sub:"World Wid 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'}
  ]
}

 - TOC에서 전달받은 속성정보를 이용하여 내용을 표시할 수 있도록 수정

<Toc data={this.state.contents}></Toc>

 - TOC의 render 함수를 수정하여 App에 설정된 state에 따라 표시되도록 수정

 > App에 설정된 contents의 항목을 지우면 Toc의 render로 생성되는 항목도 함께 삭제됨

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>);
    i = i + 1;
  }
  return(
    <nav>
      <ul>
        {lists}
      </ul>
  </nav>
  );
}

 > 오류발생 : react에서 스크립트로 생성하는 화면요소는 식별정보(key)를 표시해야 함.

lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);

* react에서 여러 엘리먼트를 자동으로 생성하도록 작업하기위해서 각 항목을 구분할 수 있도록 key값을 정의해야함

* App에서 상태를 정의하고 하위컴포넌트에서 props를 이용하여 사용한다.

 

* 실습결과 - 링크를 클릭하면 /content/ 폴더아래 key에 해당하는 자원이 표시됨