비동기 상태관리(setState)

프로젝트를 진행하며 가장 애먹었던 부분이 비동기적 상태관리이다..

React hook인 useState()에서 setState를 사용할 때 동기적 처리와 비동기적 처리에 대해 잘 이해하지 못했다.

동기적 처리과정에서는 순서대로 상태가 변경되기 때문에 문제가 없었지만, 

서버요청의 응답 데이터(비동기)로 처리해야할 때에 setState 함수를 그대러 써주면 내가 원하는 대로 상태 값이 변경되지 않는다..

 

setState()를 알아보기 위해 아래 두개의 링크를 참고 했다.

https://www.youtube.com/watch?v=hSdVDBPTT0U 

https://ko.reactjs.org/docs/react-component.html#setstate

 

setState는 React hook인 useState에서 사용되는 함수이다.

const [state, setState] = useState(initialValue);

state는 상태의 값, setState는 상태를 변경하는 함수, inistialValue는 초기값이다.

보통은..? 동기적 처리할때는 setState()에 원시형 데이터 혹은 참조형 데이터를 넣어 줘도 상태가 잘 변경되는 걸 알 수있다.

하지만 비동기적 처리가 필요할 때는 내 생각대로 상태가 변경되지 않는다.

...

const [state, setState] = useState(1);

const add = () => {
	setState(state + 2);
}

const multiply = () => {
	setState(state * 2);
}

const addAndMultiply = () => {
	add();
    multiply();
}

return (
     <div>
     	Count : {state}
        <br></br>
        <button onClick={add}>+ 2</button>
        <button onClick={multiply}>x 2</button>
        //위 코드는 잘 실행 됨
        <button onClick={addAndMultiply}>+ 2 x 2</button>
        //위 코드는 원하는 대로 상태 변경이 안됨
    </div>
);

* state와 setState는 임의로 설정할 수 있다. 

addAndMultiply함수에서 add()와 multiply()의 값을 차례대로 반환될거라고 생각했지만 아니었다.

왜? 

먼저 useState() 동작원리에서 알수 있었다.

react 모듈에서 useState() 부분을 찾아보면 setState()의 인자 값에는 state(객체) 혹은 함수를 받을 수 있다.

(모듈에서 찾아보면 state는 객체로 되어있음을 알수 있다.)

객체로 받는다면 객체의 merging과정인 Object.assign()의 과정이 있다. 

위의 addAndMultiply()를 본다면,

Object.assign(currentState, {state:state + 2}, {state:state * 2})인데 마지막 state * 2만 덮어씌워진다.

 

여기서 state를 callback 함수로 받는다면 해당 함수들은 Queue에 값이 쌓이고 쌓인 순서대로 값이 반환됨을 알수 있다.

...

const [state, setState] = useState(1);

const add = () => {
	setState(state => state + 2);
}

const multiply = () => {
	setState(state => state * 2);
}

const addAndMultiply = () => {
	add();
    multiply();
}

return (
     <div>
     	Count : {state}
        <br></br>
        <button onClick={add}>+ 2</button>
        <button onClick={multiply}>x 2</button>
        <button onClick={addAndMultiply}>+ 2 x 2</button>
    </div>
);

위 코드처럼 add 함수와, multiply 함수안에 setState() 인자에 callback함수 처리 하면 내가 원하는대로 동기적으로 처리되는 것을 확인 할 수 있다.

 

해당 부분을 이해하기 위해서 영상을 여러번 보고 공식문서를 천천히 읽어 봤다.

state가 동시에 처리되거나, api호출 등 비동기적 처리가 필요할 때 유용하게 쓸듯 싶다.

 

더 많은 비동기적 상태변경이 필요할경우도 고민해 봐야할듯 싶다.