[React] 렌더링 스냅샷과 업데이트

📸 렌더링 스냅샷

state가 업데이트 되면 렌더링 트리거가 당겨진다 설명한 적이 있습니다.

 

렌더링 트리거가 당겨진 후 컴포넌트의 호출이 이루어집니다.

 

그런데 유의해야 할 점은 컴포넌트는 함수라는 점입니다.

 

호출된 컴포넌트의 prop,이벤트핸들러,로컬변수 와 같은 state들을 렌더링 당시의 state를 사용합니다.

 

이를 스냅샷이라고 표현합니다

function Component(){
let [count, setCount] = useState(0)


return(
<>
<button onClick={()=>{
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
}} CLICK </button>
</>
)
}

 

위 코드의 경우 count값은 1이됩니다.

 

그 이유는, count가 호출되었을 때,

 

한번 반환되면 사라지는 일반 변수와 달리 state는 함수 외부에 저장되고 React가 관리하게 됩니다.

---

❓** 그럼 state는 어떻게 업데이트할까?**

렌더링이 될때 state는 큐 자료구조로 작동됩니다.

 

잠시 큐 자료구조에 대해 설명해보자면

 

큐는 먼저 들어간 데이터를 먼저읽는 선입선출형의 자료구조입니다.

 

이에따라 state는 렌더링되기전 state큐라는 곳에 담겨있다가 먼저 집어넣은 자료먼저 꺼내오게 됩니다.

 

이 점을 기억하면서 코드는 어떻게 업데이트 되는지 알아봅시다.

function Component(){
let [count, setCount] = useState(0)


return(
<>
<button onClick={()=>{
setCount(count => count + 1) // 1
setCount(count => count + 1) // 2
setCount(count => count + 1) // 3
}} CLICK </button>
</>
)
}

 

위의 설명이랑 다르게 state가 업데이트 되는 모습을 볼 수 있습니다.

 

이렇게 state가 업데이트되는 개념은 batching이라는 개념으로 설명이 됩니다.

---

🪵batching

리액트는 코드를 렌더링 하기전 이벤트핸들러안에 있는 코드이 전부 작동될 때 까지 먼저 기다린 후 렌더링을 합니다.

 

이런 개념을 batching이라합니다.

 

그렇기 때문에 위의 코드도 이벤트 코드가 전부 작동될 때 까지 기다렸다가

 

count state를 업데이트하고 다음 코드에서 업데이트 된 state를 반환하는 방식으로 업데이트할 수 있습니다.

 

state를 한 이벤트 핸들러에서 여러번 업데이트하려면 n => n + 1 과같은 식을 사용하는것이 좋습니다