[React] state 변경하기 (bind, setState 함수)

리액트에서 event 함수를 만들 때, state 값을 바꾸어 주려면, 밑의 코드와 같이 바꾸어주면, 오류가 나게 된다. 

render함수 안에서 this는 component 자신을 가리키지만, event function 안에서는 this 값이 undefined 하게 되기 때문.

 

<App.js 에서 App component의 render함수 내부 중>

<header>
  <h1><a href="/" onClick={function(e){
    console.log(e);
    e.preventDefault(); // 자동 reload 를 막아줌
	this.state.mode = 'welcome'; 
  }}>{this.state.subject.title}</a></h1>
  {this.state.subject.sub}
</header>

 

<수정후 App.js>

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


class App extends Component {
  constructor(props){ // component가 실행될 때 constructor함수가 제일 먼저 실행되어서 초기화를 담당 
    super(props);
    this.state = {
      mode:'read',
      subject:{title:'WEB', sub:'World Wide Web!'},
      welcome:{title:'Welcome', desc:'Hello, React!!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaSciprt', desc:'JavaScript is for interactive'}
      ]
    }
  }
  render() {
    console.log('App render');
    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    } else if(this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className="App">
        {/* <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}> 
        </Subject> */}
        <header>
          <h1><a href="/" onClick={function(e){
            console.log(e);
            e.preventDefault(); // 자동 reload 를 막아줌
            // this.state.mode = 'welcome'; // 이렇게 하면 react가 state가 변한것을 모름.
            this.setState({
              mode:'welcome'
            });
          }.bind(this)}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}


export default App;

 

여기서 bind함수는 event function 밖의 this (즉, 컴포넌트를 나타내는 값)를 event function 안에 주입시켜주는 역할을 한다. 

 

그리고 component가 state값 생성이 끝난 뒤에 동적으로 바꿀 때는 this.state.mode = 'welcome' 이런 식으로 수정하는 것은 리액트가 state값을 바꾼 것을 모르기 때문에 위 예시처럼 mode값이 바뀌지 않는다. 리액트가 알 수 있게, this.setState() 함수 안에서 state값을 바꾸어주면 의도대로 정상적으로 state값이 바뀐 것을 볼 수 있다.