[React.js] React.js 5편 state

React.js state

---

이번에는 state라는 것을 사용해보겠다. state는 props와 달리 component내부에 가지고 있는 값이다. 값이 변화가 필요할때 다시 Rerendering해주며 변화가 필요한 데이터를 바꾸어 주는 역활을 한다. 

그럼 이제부터 사용해보겠습니다. 

우선 이렇게 JSX코드를 작성해봅니다. 

render(){

return <div>

    <h1>Counter </h1>

    <div>값: {this.state.number}</div>

    <button>+</button>

    <button>-</button>

    </div>

}

그럼 이런식으로 웹페이지가 만들어졌을 겁니다. 

그럼 버튼이 작동하게 State를 작동시켜 봅시다. 

우선 클래스안에 state 객체하나를 만들어 줍시다.

1. state객체 생성 

state = {

number: 0

}

그리고 div안에 {this.state.number}같이 호출할 수 있습니다.

2. 버튼함수 만들어보기 

이제 함수를 만들어 보겠습니다. 

handleIncrease = ()=>{

    this.setState({

    number:this.state.number+1

    });

}

handleDecrease = ()=>{

    this.setState({

    number:this.state.number-1

    });

}

이런식으로 함수를 만들어줍니다. 하지만 여러분 중에 난 Arrow함수 잘모르는데 ...... 그냥 함수로 사용하면 안될까라고 생각하는 사람이 있을 수 도 있습니다. 이럴 때에는 물론 불편하지만 

일반 함수로 처음 적어놓으면 this를 못찾는 에러가 발생합니다. 따라서 생성자를 만들어주는 불편이 발생하지만 굳이 사용하겠다면 말리지는 않겠습니다. 

constructor(props){

super(props);

this.handleIncrease = this.handleIncrease.bind(this);

this.handleDecrease = this.handleDecrease.bind(this);

}

handleIncrease(){

this.setState({

number:this.state.number + 1

})

}

handleDecrease(){

this.setState({

number:this.state.number - 1

})

}

나는 처음부터 애로우 함수 쓸련다.

3. button태그에 추가해주기 

<button onClick={this.handleIncrease}>+</button> 

이런식으로 사용할 수 있다. 

props와 state비교 하며 생각해보기 

props는 부모로 부터 값을 받아와서 데이터를 바꾸어주고 읽기 전용형태이다. 

state는 component내에서 갖고 있는 것이며 이전에 갖고 있던 값과 비교하면서 바뀔점이 있다면 데이터를 바꾸어주며 reRendering 해주는 것이다.   일단은 이 두가지만 잘기억하면 될 것같다.