useState의 비동기 처리와 함수형 업데이트
1. setState는 비동기로 동작한다.
위의 코드를 보면, 버튼을 누르면 숫자가 증가하는 함수를 만들었다. 코드상에서는 한번 클릭할 떄마다 3씩 증가할 것같지만, 실제로 결과값을 보면 1씩 증가하는 것을 확인할 수 있다.
그 이유는,
- 동일한 state를 연속적으로 업데이트 하는 경우, 리액트는 setState를 각각 동기로 수행하지 않고, batch(일괄처리) 한다. 전달된 setState를 하나로 병합한 후 최종적으로 한번의 setState를 하게 된다는 의미이다.
- batch 처리의 이유는 당연히 성능 이슈 때문이다 >> 리렌더링을 발생하는 setState가 일어날 떄마다 리랜더링이 일어난다면 엄청 많은 랜더링이 일어날 것이다.
2. 함수형 업데이트
결국 문제의 해결은 setState를 비동기로 수행할 때, 값을 전달하지 말고 업데이트된 최신의 state와 함께 함수를 전달하는 방법이다.
그래서 결과적으로는, setValueX 함수를 사용할 때 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주어야된다.
그러면 이전 값을 넣어준다.
비동기 동기
1. 동기(synchronous: 동시에 일어나는)
- 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속인데, 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자기에서 결과가 주어져야 합니다.
- 요청한 결과가 한자리에서 동시에 일어남
- A노드와 B노드 사이의 작업 처리 단위(transaction)을 동시에 맞추겠다.
2. 비동기(Asynchronous:)
- 비동기는 동시에 일어나지 않는다는 의미입니다. 요청한 결과는 동시에 일어나지 않을거라는 약속입니다.
- 요청한 그 자리에서 결과가 주어지지 않음
- 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.
3. 동기와 비동기는 상황에 따라 각각 장단점이 존재한다.
- 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있습니다.
- 비동기 방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있습니다.
3-1. 동기방식의 예 (A가 B에게 10,000원을 송금)
- A의 계좌는 현재 10,000원을 출금할 생각이다.
- A의 계좌가 B의 계좌로 방금 인출한 10,000원을 송금한다.
- B의 계좌는 10,000원을 받았다는 것을 인지하고, A의 계좌에 10,000원을 받았다고 전송한다.
- A,B 계좌 각각 차감과 증가가 발생한다.
순서에서 보듯이, A의 계좌와 B의 계좌는 서로 요청과 응답을 확인한 후 같은 일을 동시에 진행하였습니다.
“계좌이체" 같은 작업은 동기방식으로 처리해야 A에게 보냈는데 B에서 못받는 상황이 없을 것 입니다.
반대로 비동기 방식은 위의 예시처럼 노드사이의 작업 처이 단위를 동시에 맞추기 않아도 됩니다.
3-2. 비동기방식의 예(시험날의 학생과 선생)
- 학생은 받은 시험지를 푼다.
- 시험문제를 모두 푼 학생은 성생에게 자신이 푼 시헌지를 건낸다.
- 선생은 학생으로 부터 받은 시험지를 채점한다.
- 채점이 다 된 시험지를 학생에게 전송한다.
- 학생은 선생이 전송한 시험지를 받아 자신의 시험 결과를 확인한다.
학생과 선생은 시험지라는 연결고리가 있지만 시험지에 행하는 행위/목적은 서로 다릅니다. 학생은 시험지를 푸는 역할을 하는 반면 선생은 시험지를 채점하는 역할을 합니다. 서로의 행위/목적은 다르기때문에 둘의 작업 처리기간은 일치하지 않고, 일치하지 않아도 됩니다.
동기와 비동기는 어떤 작업 혹은 그와 연관된 작업을 처리하고자 하는 시각의 차이입니다. 동기는 추구하는 행위/목적이 동시에 이루어지고, 비동기는 추구하는 행위/목적이 다를 수도 있고, 동시에 이루어지지도 않습니다.
비동기 방식 예제를 통해 블록과 논블록의 차이를 간략히 설명하면, 학생이 시험지를 선생에게 건낸 직후 가만히 앉아 채점이 끝나서 시험지를 돌려받기만을 기다린다면 학생은 현재 블록상태 입니다. 하지만 학생이 시험지를 건낸 후 선생에게 채점이 완료되었다는 확인을 받기 전까지 다른 과목을 공부한가더나 게임을 하거나 다른일을 하게 되면 현재 학생상태는 논블록 상태가 됩니다.
