[생활코딩 React] ④ state

🔗 생활코딩 React

1. State 소개

• props

  • 사용자가 컴포넌트를 사용하는 입장에서 중요
  • 컴포넌트의 동작을 바꾸고 싶을 때 제공하는 문법적인 정보

• state

  • props의 값에 따라 내부 구현에 필요한 값

  👉 state는 다양한 동작을 하는 컴포넌트 제작에 필수

2. State 사용

• 외부에서 알 필요가 없는 정보를 숨길 때 사용

// App.js
class App extends Component {
  constructor(props){  // render보다 먼저 실행되어 컴포넌트 초기화
    super(props);
    this.state = {
      subject:{title: 'WEB', sub: 'World Wide Web!'}
    }
  }
  render() {
    return (
      <div className="App">
        // state 사용
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}>
        </Subject>
      </div>
    );
  }
}

• 상위 컴포넌트인 App의 값을 하위 컴포넌트인 Subject에 state 값을 통해 전달 가능

3. key

• state 사용해서 TOC 리팩토링

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

// TOC.js
class TOC extends Component {
    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>
      );
    }
  }

• 각 list 값에 구분이 필요하기 때문이 고유값인 key 부여

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