[2019.04.15] React의 개념 - state

내가 이해한 대로 적는 설명

 

 

state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다.

(함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!)

 

# state를 선언하는 법

class Hello2 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      //여기에 Object 방식으로 state를 저장
      name : 'inyong',
      age : 27
    }
  }
  render = () => (
    <div>Hello {this.props.todo}</div>
  )
}

constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해주면 된다.(맞는지는 모르곘는데, 꼭 state라는 명칭으로 선언해야되는 것 같다.)

# state를 변경하는 법

class Hello2 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      name : 'inyong',
      age : 27
    }
  }

  changeName = (NewName) => {
    this.setState({
      name : NewName
    })
  }
  addAge = () => {
    this.setState({
      age : this.state.age + 1
    })
  }
  render = () => (
    <div>Hello {this.props.todo}</div>
  )
}

클래스 안의 changeName, addAge 함수를 보자. this.setState라는 함수를 이용해서 데이터를 변경해준다. 원하는 state를 변경하고자 하면, 위 두 함수처럼 매개변수로 받고 this.setState함수를 이용하여 this.state를 바꿔주면 된다.

 

# onClick 설정하는 법

class Hello2 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      age : 27
    }
  }
  addAge = () => {
    this.setState({
      age : this.state.age + 1
    })
  }
  render = () => (
    <div onClick={this.addAge}>Hello {this.props.todo}</div>
  )
}

<div> 태그를 보자. Hello2 클래스으이 addAge함수를 그냥 onClick으로 넣어줬다. addAge를 arrow function으로 지정해줬기 때문이다.

arrow function이 아닌, 일반 function으로 선언해주면 실행시킬 함수를 bind해서 넘겨줘야한다.

class Hello2 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      age : 27
    }
  }
  addAge() {
    this.setState({
      age : this.state.age + 1
    })
  }
  render = () => (
    <div onClick={this.addAge.bind(this)}>Hello {this.props.todo}</div>
  )
}