[FE] React : setState

리액트에서 State가 업데이트 될 때면 반드시 내장함수인 setState를 통해서 업데이트 시켜야한다. 

-> 그냥 state에 있는 변수를 바꿔버리면 안됨. state를 전체적으로 업데이트를 해줘야하는데 그것이 바로 

setState!

 

=> setState를 써야 리액트가 "아~스테이트가 변경되었구나 렌더함수를 다시 호출하자! 라는 식으로 진행이 됨.

class Habit extends Component {

state = {
	count: 0,
};

// 아래는 콜백함수
addCountNumber = () => {
	this.setState({ count: this.state.count+1 })
};

render() {
	return (
    
    )
}

.
.
.
.
.

}

subtractNumber = () => {

    this.setState({ count: this.state.count - 1 });

}

 

아래는 0이하로 안내려가게 하는 코드

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

 

// 구글 크롬개발자도구로 보면

 

props는 즉, 부모 컴포넌트에서 전달받은 properties는 아무것도 없고 

state에는 count 가 1이라는게 들어가있음.

 

 

 

*참고로 setState는 비동기 함수이다.

 

setState 호출 후에 state를 가져오면 변경되지 않은 state가 자꾸 불러져오는 현상이 있음.

setState로 state가 변경되기도 전에 state로 불러와서 문제가 생김.

 

해결을 위해 async/await보다 나이스한 방법은 callback 함수를 이용하는 것.

 

*아래 문서 참고

donghunee.github.io/study/2020/01/26/react/

[React]setState callback