https://react.dev/learn/state-as-a-snapshot
요약
💡 상태(State) 변수는 일반적인 JavaScript 변수처럼 읽고 쓸 수 있는 변수로 보이지만, 상태는 스냅샷과 유사한 방식으로 작동합니다. 상태를 설정하면 이미 가지고 있는 상태 변수가 변경되는 것이 아니라, 다시 렌더링을 트리거합니다.
사실
- 상태를 설정하면 다시 렌더링이 트리거됩니다.
- 렌더링은 시간상의 스냅샷을 촬영합니다.
- 상태 변수의 값은 렌더링 내에서 변하지 않습니다.
- 상태 업데이터 함수를 사용하여 최신 상태를 읽을 수 있습니다.
렌더링은 시간상 스냅샷을 촬영합니다
- 리액트가 컴포넌트를 호출하면, JSX를 반환함.
- 반환하는 JSX는 해당 시점의 UI 스냅샷과 유사합니다. 상태를 사용하여 계산된 props, 이벤트 핸들러 및 로컬 변수를 포함합니다.
- 반환된 UI “스냅샷”은 상호작용 가능하며, 이벤트 핸들러와 같은 로직을 포함합니다.
- React는 화면을 업데이트하여 이 스냅샷과 화면을 일치하게하고 이벤트 핸들러를 연결합니다.
- 리렌더 과정
- 리액트가 컴포넌트를 다시 호출함
- 컴포넌트가 새로운 JSX snapshot을 반환함
- 리액트가 반환된 snapshot에 맞춰 화면을 업데이트함.
상태는 렌더링 내에서 “고정”됩니다
- 상태는 함수가 반환되고 나서 사라지는 일반 변수와 달리 React 자체에서 “살아있습니다”. (컴포넌트 외부에서)
- React는 상태를 가지고 있다가 컴포넌트를 호출할 때, React는 컴포넌트에게 해당 렌더링의 state snapshot을 제공합니다.
- 이 상태 값을 사용하여 계산된 props 및 이벤트 핸들러를 사용해서 UI snapshot을 반환합니다.
상태 업데이트는 다음 렌더링을 위해 변경합니다
- 상태 업데이트는 다음 렌더링을 위해 변경됩니다.
- 첫 번째 렌더링 중에 상태는 변하지 않습니다.
- 예시 코드에서 “number” 상태 변수는 처음 렌더링에서 0입니다.
1 2 3 4 5
<button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button>
- 이로 인해 첫 번째 렌더링의 onClick 핸들러 내에서도 “number” 값이 여전히 0입니다.
- 따라서 위 예제에서는
setNumber(0 + 1)을 세번 하는 것이므로, 버튼을 눌러도 1씩만 number가 올라간다
상태 값은 렌더링 내에서 고정됩니다
- 상태 변수의 값은 렌더링 내에서 변경되지 않습니다. 이벤트 핸들러 내에서 비동기 코드를 사용하는 경우에도 마찬가지입니다.
- 이전에 생성된 이벤트 핸들러는 그 당시 생성된 렌더링의 상태 값(state snapshot)을 가집니다.
- 아래 예제는 버튼 클릭시 3초 후에 업데이트 되기 전 숫자를 alert으로 띄운다.
1 2 3 4 5 6
<button onClick={() => { setNumber(number + 5); setTimeout(() => { alert(number); }, 3000); }}>+5</button>
#review