12화: State as a Snapshot

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새. Unsplash 의 Loriane Magnenat 님 사진

공식 문서

https://react.dev/learn/state-as-a-snapshot

State as a Snapshot – React

들어가기

• 상태 변수(state variable)는 우리가 읽고 쓸 수 있는 평범한 자바스크립트 변수처럼 생김
• 하지만 상태는 일종의 snapshot에 가까움
• 상태를 바꾸는(set) 것은 우리가 이미 갖고 있는 상태 변수의 값을 바꾸는 게 아니라 렌더링을 유발시키는 것

상태 변경은 렌더링을 유발한다

• 우리가 보고 있는 화면이 사용자와의 상호작용에 의해 즉각적으로 바뀐다고 생각하는 경우가 있는데 그건 아님
• 리액트는 상태가 바뀌어야 리렌더링을 함 -> 화면이 어떤 사건에 반응하길 원한다면 상태를 바꿔야 함

렌더링은 순간을 포착한다

• "렌더링"은 리액트가 컴포넌트(=함수)를 호출하는 것을 의미
• 그 함수의 반환값은 그 순간의 UI를 찍은 사진과 같음
• props, 이벤트 핸들러, 지역변수는 모두 렌더링하는 그 순간의 상태들을 사용해서 만들어짐

컴포넌트의 리렌더링 3단계

1. 리액트가 함수를 호출
2. 함수가 새로운 JSX snapshot 반환
3. 리액트가 그 snapshot과 화면이 일치하도록 업데이트

컴포넌트의 리렌더링과 상태

• 상태는 컴포넌트의 저장소: 함수의 결과 반환과 함께 사라지는 변수가 아님
• 상태는 "리액트 속에" 살고 있음: 함수 밖의 존재
• 리액트는 함수를 호출할 때 그 특정한 렌더만을 위한 상태값들의 snapshot을 전달함 (그렇기 때문에 함수의 순수성 유지 가능)
• 함수는 그 snapshot들을 이용해 새로운 props, event handlers, JSX, ... 등을 만듦

상태가 snapshot임을 반드시 알아야 하는 이유

<button
  onClick={() => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
  }}
>
  숫자 3만큼 올리기?
 </button>

컴포넌트 안에 number라는 상태가 있고 그걸 바꾸는 버튼이 있다.
이 버튼을 누르면 number는 3이 증가할까? 아니다.

 

현재 number는 0이라고 치자.

첫 번째 setNumber(number + 1); 를 하고 number는 몇일까?

1? 아니다. 0이다. 왜?

지금 갖고 있는 상태 변수의 값들은 전부 이번 렌더링을 시작할 때 받은 snapshot 이니까 0이다.
다음 렌더링 때 새로운 snapshot을 받으면 그 때는 number가 1일 것이다.

이 코드는 setNumber(0 + 1);를 세 번 한 거랑 아무런 차이가 없다.

물론 setNumber를 세 번 해서 3만큼 더한 결과를 취하는 법도 있다. 이 방법은 바로 다음 문서에서 나온다니 넘어간다.

 

우리가 코드를 짤 때 보는 상태 변수에 저장된 값들은 전부 고정된 값임을 기억하자!!

결국 "함수"형 컴포넌트이기 때문에 클로저랑 연관지어서 이해해도 좋을 것 같다.