React - useState 동작원리 이해하기

 

 

 

 

다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 

 

1. DNS 이해하기

Network - DNS 이해하기 + 기본 동작원리

 

2. 브라우저 렌더링 이해하기

Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom)

 

3. 가상돔(Virtual DOM) 이해하기

React- 가상돔(Virtual DOM) 이해하기

 

4. useState 동작원리 이해하기

React - useState 동작원리 이해하기

 

 

---

 

React - useState 동작원리 이해하기

블로그를 토대로 내가 공부하며 이해한 흐름대로 정리를 해 보았다.

 

 

useState 로 상태값 변경을 한다

함수형 컴포넌트에서는 useState 를 이용해 setter 메소드를 통한 상태값 변경을 한다.

그럼 React 는 useState 의 이전 상태 값을 바탕으로 업데이트된 상태 값을 비교해 변화를 감지 한다.

그래서 그냥 값을 변경하면 안된다. 

setCount(100); // good 😄🙆‍♂
count = 100;   // bad  😣🙅‍♂️

 

(React 는 데이터를 아무렇게나 변경하지 못하도록 useState 를 통해 관리하는 것 같다.

그래서 보통 동적으로 변하는 값은 useState 를 사용하여 관리한다.)

 

 

useState 는 값을 어떻게 기억할까 

count 에는 초기 값으로 0이 할당됬다.

const [count, setCount] = useState<number>(0);

 

요기 div에 클릭을 했더니 +1 이 늘었다.

<div onClick={() => setCount(count + 1)} />

 

그 순간 새발자는 이런 생각을 한다.

🐥 "그럼 바뀐 상태값이 감지되고 렌더링이 되겠군"
🐥 "아차차 위에서 초기값 0 을 선언해놨으니 초기값 0 으로 값이 들어가겠네?"
🐥 "그럼 렌더링 해도 아까랑 같은 결과가 나와야 하지 않나?"

 

 

라고 생각할 수 있지만, 아까와는 다르다.

클로저의 특성때문에 다시 useState 를 불러와도 초기값 0이 아닌 1이 유지된다. 

 

 

** 여러개의 useState를 사용할 때는 직전의 값을 어떻게 다 기억할까

리액트에서는 각 컴포넌트에 대한 정보를 가지고 있는 메모리 공간이 각각 있는데,

여기서 여러 useState 를 구분할 수 있도록 정보를 저장하고 있는 것으로 보인다. 

 

 

 

 

useState 에서 사용된 Closure

Closure 는 useState 에서 중요한 개념이다.

브라우저는 파싱할때 한줄 한줄 순서대로 코드를 실행하는데,

보통 변수가 선언되고 그 변수를 사용한 함수가 선언이 된다. 그래서 순서가 틀리면 실행이 안된다.

하지만 Closure 은 코드 순서가 바뀌어도 변수를 잠깐 저장 (capture) 했다가 필요한 곳에 전달해주는 개념(기능) 이다.

 

Closure 는 자신이 사용하는 변수를 기억하고
어딘가에 저장(Capture) 해두는 특징이 있다.

 

 

 

 

useState 의 옛날 값이 나온다

useState 의 상태값은 다음 렌더링까지 변하지 않는다. 이 count 값이 새로운 값이 되는건 리랜더링이 된 이후다.

setCount 는 메모리 어딘가에 있는 value 를 변경한 것이지, 지금 옆에 가지고 있는 count 가 변경된 것이 아니다.

useEffect(() => {
  setCount(count + 1); // +1 을 했는데
  console.log(count);  // count 는 0을 리턴했다
}, []);

 

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

useEffect 가 실행된 이후에 리렌더링이 진행될 것이다.

console.log(count)를 실행하는 시점에는 리랜더링이 되기 전이니, count 값은 0이 된다.

 

 

 

렌더링은 도대체 언제할까

수많은 상태 값이 각각 바뀔 때마다 화면을 리렌더링 해야한다면 문제가 생길 것이다.

그래서 리액트는 이런 문제를 효율적으로 해결하기 위해 setState 를 연속 호출하면 setState 를 모두 취합(batch) 한 후에 한 번에 렌더링하도록 한다. 그러면 100번의 상태값 변화를 한 번의 렌더링으로 최신의 상태를 갱신할 수 있다.

 

정확히는 16ms 단위로 batch update를 진행하고,
그사이 변경된 상태값을 모아(merge)
이전 트리와 변경된 트리를 비교하는 작업(reconciliation)을 거쳐
최종적으로 변경된 부분만 DOM에 적용시킨다.

 

 

리액트에서 사용된 Batch

배치작업은, 데이터를 실시간으로 처리하는게 아니라, 일괄적으로 모아서 처리하는 작업을 의미한다.

하루동안 쌓인 데이터를 배치작업을 통해 특정 시간에 한꺼번에 처리하는 경우가 이에 해당한다.

은행의 정산작업과 같은 업무에서 이런 일괄처리를 수행하게 되며

사용자에게 빠른 응답이 필요하지 않은 서비스에 적용할 수 있다. 

특정 시간이후에는 자원을 거의 소비하지 않는 것이 특징이다.

 

 

 

 

 ref :

React - setState가 비동기인 이유

 

Web: useState의 동작 원리와 함정