스냅샷으로서의 state
state 변수는 일반 JavaScript 변수처럼 보이지만 실제로는 스냅샷처럼 동작한다. state 변수를 설정해도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 실행된다.
학습 내용
- state 설정으로 리렌더링이 촉발되는 방식
- state 업데이트 시기 및 방법
- state를 설정한 직후에 state가 업데이트되지 않는 이유
- 이벤트 핸들러가 state의 ‘스냅샷’에 액세스하는 방법
Setting state triggers renders
- state를 설정하면 렌더링이 촉발된다.
- 인터페이스가 이벤트에 반응하려면 state를 업데이트해야 한다.
- 즉, state 변수에 대한 set(설정자) 함수를 호출하면 렌더링이 촉발된다.
- set(설정자) 함수로 state 변수 값을 변경하고 새 렌더링을 큐에 대기시킨다.
- React는 새로운 state 변수 값에 따라 컴포넌트를 다시 렌더링한다.
Rendering takes a snapshot in time
- 렌더링은 그 시점의 스냅샷을 찍는다.
- 렌더링(Rendering): React가 컴포넌트, 즉 "함수를 호출한다"는 뜻이다.
- 해당 함수에서 반환하는 JSX는 시간상 UI의 스냅샷과 같다.
- prop, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 사용해 계산된다.
React가 컴포넌트를 리렌더링할 때
- React가 함수를 다시 호출한다.
- 함수가 새로운 JSX 스냅샷을 반환한다.
- React에게 state를 업데이트하도록 명령
- React가 state값을 업데이트
- React가 state값의 스냅샷을 컴포넌트에 보냄
- 그러면 React가 반환한 스냅샷과 일치하도록 화면을 업데이트한다.
import { useState } from 'react';
export default function Counter() {
const [number, setNumber] = useState(0);
return (
<>
<h1>{number}</h1>
<button onClick={() => {
setNumber(number + 1);
setNumber(number + 1);
setNumber(number + 1);
}}>+3</button>
</>
)
}
- 위 컴포넌트의 버튼을 입력하면 1씩 증가한다. 왜일까?
- state를 설정한 것은 다음 렌더링에 대해서만 변경된다.
- 첫 번째 렌더링에서 number는 0. 따라서 해당 렌더링의 onClick 핸들러에서 setNumber(number+1) 가 호출된 후에도 number의 값은 여전히 0이다.
- 따라서 위의 set(설정자) 함수는 다음과 같다.
setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);
state 변수의 값은 이벤트 핸들러의 코드가 비동기적이더라도 렌더링 내에서 절대 변경되지 않는다. 해당 렌더링의 onClick 내에서, number의 값은 계속 0이다. 이 값은 컴포넌트를 호출해 React가 UI의 "스냅샷을 찍을" 때 "고정"된 값이다.
React는 하나의 렌더링 이벤트 핸들러 내에서 state 값을 "고정"으로 유지한다. 따라서 코드가 실행되는 동안 state가 변경되었는지 걱정할 필요가 없다.
Recap
- state를 설정하면 새 렌더링을 요청한다.
- React는 컴포넌트 외부에 마치 선반에 보관하듯 state를 저장한다.
- ‘useState’를 호출하면 React는 해당 렌더링에 대한 state의 스냅샷을 제공한다.
- 변수와 이벤트 핸들러는 리렌더링해도 “살아남지” 않는다. 모든 렌더링에는 자체 이벤트 핸들러가 있다.
- 모든 렌더링(과 그 안에 있는 함수)은 항상 React가 그 렌더링에 제공한 state의 스냅샷을 “보게” 된다.
- 렌더링된 JSX에 대해 생각하는 것과 같이, 이벤트 핸들러에서 state를 정신적으로 대체할 수 있습니다.
- 과거에 생성된 이벤트 핸들러는 그것이 생성된 렌더링 시점의 state 값을 갖는다.
'프로젝트 > 정글 FE 스터디' 카테고리의 다른 글
[React] Preserving and Resetting State (0) | 2023.10.16 |
---|---|
[React] Choosing the State Structure (0) | 2023.10.16 |
[React] Render and Commit (0) | 2023.09.18 |
[React] Reacting to input with State (0) | 2023.09.14 |
[React] Updating Objects in State (0) | 2023.09.10 |