동기와 비동기
- 동기: 코드 한 줄 한 줄 끝날 때까지 기다렸다가 다음줄로 넘어가는 성질.
ex. forEach - 비동기: 코드 한 줄이 하고 있는 일이 끝나지 않았는데 일을 시켜놓고 내려가다가 일이 끝났다는 응답이 오면 다시 돌아오는 성질.
ex. fetch, setState
setState는 비동기 성질을 가지고 있어서 setState하고 값이 잘 들어왔는지 확인하기 위해서 그 밑에 줄에 console.log(this.state.value) 해도 직전 기존 값이 찍히지 지금 당장 돌고 있는 코드가 뜨지 않는다.
이를 해결하기 위해서 어떻게 해야 할까.
콜백 : 인자인데, 함수인 경우
인자로 함수를 받을 수 있는 언어는 많지 않다. 그 중 하나가 자바스크립트이다.
이를 이용해서 우리는
this.setState({
number: this.state.number +1
}, () => {
console.log(this.state.number)
});이렇게 콘솔을 넣어줄 수 있다.
이유: 두 번째 인자의 콜백함수는 해당 setState가 다 끝나면 실행되는 함수이므로 이미 업데이트가 된 숫자가 바로 나오는 것이다.
콜백을 너무 남용하는 것도 좋지만은 않은데
input의 상태관리 같은 경우
콜백함수를 만들기보다는 console.log(e.target.value)를 써서 event를 통해 확인할 수 있다.
1차 프로젝트 하면서
1차 프로젝트를 할 때, 상품의 색깔과 사이즈를 고르는 것을 구현하고 있을 때, 이것과 관련해서 문제가 생겼었다.
첫 번째 경우
함수에서 잘 setState되고 있는지 확인하고 싶어서 그냥 밖에 console.log를 썼었는데 값이 직전 값만 나오고 새로운 값이 안나왔었다.
이렇게 콜백으로 해주니 바로바로 현재 변화되는 값이 나왔다.
두 번째 경우
push를 해주면서 사용자가 선택한 색과 사이즈가 바로 장바구니에 넣을 수 있는 상태로 묶여서 나와야 하는데 선택이 모두 끝났음에도 나타나지 않았었다.
그래서 예리님께 여쭤봤는데 비동기 성질 때문이었다.
원래는 push까지만 있었는데.
비동기 성질 때문에
this.setState({
userCartArr: this.state.userCartArr
})라고 다시 호출해줬다.
이렇게 사이즈, 색을 선택하면 바로 밑에 div가 생긴다.
비동기 끝!
