[React] useState의 동작 원리

useState 동작원리

함수형 컴포넌트에서는 useState를 통해 상태값을 변경할 수 있다.

const [state, setState] = useState(초기값);

setState라는 함수를 setter로서 사용한다.

 

여기서 한가지 오해하는 개념은

setState 함수를 호출하면 state라는 변수의 값이 변경된다는 것이다.

=> 이것은 잘못된 개념이다.

state는 const로 선언되어 있으므로 상태값 변경 불가하다.

 

setState로 상태값을 변경하면

useState 함수 밖에 선언되어있는 어느 전역변수인 value 값을 변경해준 것이지 

state라는 변수 자체의 상태값을 변경해준 것이 아니다.

 

여기서 Closure 개념이 사용된다.

Closure는 다수의 명령 흐름들을 하나의 Closure로 묶어 여기저기 전달해준다.

자신이 사용하는 변수를 기억하고 어딘가에 저장한다. 즉, Capture한다.

특정 환경에서 발생하는 현상이고, 그 당시의 환경을 기억한다.

 

const [state, setState] = useState(0);
useEffect(() => {
  setState(state + 1);
  console.log(state);
}, []);

이 함수를 실행시키면 당연히 1이 출력될 것으로 예상한다.

하지만 출력되는 값은 0이다.

 

그 이유는 state값이 setState를 통해 직접적으로 변경되는 것이 아니고,

메모리 어딘가에 존재하는 value를 변경 후 리렌더링 시킨다.

state 값이 변경될 시기는 다음 렌더링이 이루어지고 난 후이다.

 

JS는 싱글스레드로 돌아가기에

useEffect()가 실행되고 난 후 리렌더링이 이루어진다.

 

렌더링은 수많은 상태값들이 변경될때마다 이루어지지 않는다.

setState를 연속으로 호출하면 Batch라는 개념을 통해 한번에 렌더링한다.

(Batch란? 데이터를 실시간이 아닌 일괄적으로 모아 처리하는 개념이다.)

 

정리하자면,

함수형 컴포넌트에서의 상태 관리는 useState를 통해 할 수 있는데

useState는 [(상태값 저장 변수)state, (상태값 갱신 함수)setState] 배열을 반환하며,

setState는 state의 상태값을 갱신하는 것이 아닌 useState 밖의 전역변수 _value값을 갱신한 후 리렌더링하기 때문에

state는 리렌더링된 후 갱신된 값으로 변한다.

 

참조 : 

https://velog.io/@jjunyjjuny/React-useState는-어떻게-동작할까

[ React ] useState는 어떻게 동작할까

https://medium.com/hcleedev/web-usestate의-동작-원리와-함정-7b4825c16b9

Web: useState의 동작 원리와 함정

https://devbirdfeet.tistory.com/220

React - useState 동작원리 이해하기