react state 이해하기

데이터를 넣기 위해서는 state를 이용하면 된다.

우리의 habit tracker 에는 습관을 얼만큼 했는지를 알 수 있는 숫자 형태의 데이터가 있다.

이 데이터를 넣어서 움직이기 위해서는 state를 이용해야 한다.

그래서 우리는 이번에 +, - 버튼을 이용해서 state의 수를 올리고 내릴 것이다.

1. state로 수 형태를 만든다.

2. span 태그 안에 this.state.count로 count를 불러온다.

3. 그 수를 +, - 버튼으로 수가 + - 될 수 있게 button 태그에 onClick으로 handleIncrement를 따로 만든다.

4. 그 안에 setState로 *꼭 setState로 해야함 안그러면 리액트가 인식 못함*

this.setState({count: this.state.count + 1}); 한다.

 

전체적인 state를 변경해주어야 state가 render 함수를 다시 호출한다.

 

 

 

 

 

마찬가지로 decrement (감소)도 만들어준다.

handleDecrement = () => {
	const count = this.state.count - 1;
    this.setState({count: count < 0 ? 0 : count});
 };

감소할때는 계속 -1 -2가 되니까 0보다 작을때는 0이 나오게 삼항연산자로 처리해준다.

0보다 작을 시 0출력 아닐 시 -1