2023.04.24[리액트 state]

📖오늘 배운  것

State as a Snapshot!

state는 setState를 한 후 바로 적용되는 것이 아니라 변경된 값을 다음 렌더링 때 적용한다. 따라서 한 함수내에서 setState 후 변경된 값을 사용하려 했다면 의도대로 동작하지 않는다! 

즉, 함수가 호출될 때의 현재 state에 대한 snapShot을 찍어서 저장하고 해당 값을 활용해서 함수를 실행한다. 그리고 다시 재렌더링될 때 업데이트 된 state값을 반영하는 것!

 

Queueing a Series of State Updates

리액트는 state 업데이트를 처리하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린 후 한번에 실행된다. 이렇게 묶어서 진행하면 많은 재렌더링을 방지할 수 있다. 클릭 이벤트 같은 의도적인 이벤트는 일괄 처리하지 않음! 클릭은 개별적으로 처리된다.

state는 스냅샷처럼 저장된다고 했는데 그럼 다음 렌더링 전에 state를 여러 번 업데이트하려면 어떻게 해야하는 걸까. 그 땐 state의 이전 값을 이용할 수 있다. setState(p => p + 1) 이런 식으로 하는 경우 큐의 이전 값을 참조하여 업데이트가 일어나게 된다.

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

따라서 이러한 코드일 때 setNumber(number + 1) 이었다면 버튼을 한 번 눌렀을 때 3이 아니라 1로 렌더링될 것이다. 왜냐하면 스냅샷처럼 저장된 초기 state값을 기준으로 업데이트되기 때문에! 하지만 setNumber(n => n + 1)을 할 경우 이전 값을 참조하여 업데이트를 하기 때문에 3으로 렌더링되게 된다.

queued update	n	returns
n => n + 1	0	0 + 1 = 1
n => n + 1	1	1 + 1 = 2
n => n + 1	2	2 + 1 = 3

큐에서는 이런 식으로 값을 업데이트하는 것!!

 

 

 

💭배운 점

 

프로젝트를 진행하면서 state의 동작원리에 대해 제대로 이해하지 못해서 애 먹었던 적이 있었다. 한 이벤트 핸들러 내에서 setState로 state의 값을 업데이트해주고 그 값을 활용해서 바로 로직을 작성하면 되겠지?! 했지만 당연히도 계속 이전 값이 남아있었다. 그 때도 이유를 찾아보다가 state가 바로 값이 업데이트 되는 건 아니구나! 하고 넘어갔었는데 이번에 공식문서를 보면서 확실히 알게되어 기쁘다. 

setState의 이전 값을 활용하는 것도 프로젝트에서 다른 팀원에게 배웠는데 정확히 어떨 때 왜 이렇게 사용해야하는지 몰랐었다. 그런데 역시 답은 공식문서에 있었구나! 공식문서를 열심히 읽자!

애매하게 알았던 것, 혹은 제대로 이해하지 못했던 것을 이후에 다시 공부했을 때 이해가 되면 그것만큼 기쁜 게 없다. 물론 지금도 완벽한 이해는 아니겠지만.. 처음에는 이게 무슨 소리지?? 진짜 모르겠다 재능이없나... 했던 내용들이 완벽히는 아니어도 아 이런거구나! 하고 이해가 되니까 그래도 이만큼 이해하고 생각할 수 있게 됐구나~ 싶다! 

조금씩 더 열심히해보자~