React: 이전 값을 가져올 때의 동작 이해

<훅에 대한 자주 묻는 질문 – React> 마지막 props와 state는 어떻게 얻을 수 있습니까? 을 다시 읽고 있을 때 거동의 이해에 조금 막혔으므로, 그 해설입니다.

tl;dr

렌더링된 후에 그 시점의 값을 보존해 두는 것으로, 다음의 렌더링시에 「이전의 값」을 꺼낼 수 있다.

전제 이해

React.useEffect는 렌더링 후 실행됩니다.

그래서, 이 타이밍에서 「다음의 렌더링시에 있어서의 전회의 값」, 즉 「현재의 값」을 격납해 둔다.

저장 위치는 ref에 저장됩니다.

ref 는 무엇이든을 저장할 수 있는 변수라고 생각해 OK

일반적으로는 DOM을 묶어 넣는 케이스가 많지만, 실체는 JavaScript의 원시 오브젝트이므로 무엇을 넣어도 OK.

코드로 보기

코드 블록마다 실행 순서를 기재했습니다.
1 -> 2 -> 3의 순서로 읽어 풀어 가면 이해하기 쉽다고 생각합니다.

import React from "react";
import ReactDOM from "react-dom";

const App: React.FC = () => {
  /*************
   * 1
   *************/
  const ref = React.useRef(null) as any;
  const [count, setCount] = React.useState<number>(0);
  const increment = () => setCount(prev => ++prev);

  /*************
   * 3
   *************/
  React.useEffect(() => {
    console.log("[useEffect]count is ", count);
    ref.current = count; // <= 現在の値を保存しておく。次回から見たら前回の値になる。
  });

  /*************
   * 2
   *************/
  return (
    <div className="App">
      {console.log("[render]start---")}
      {console.log("[render] prev is ", ref.current)}
      {console.log("[render] count is ", count)}
      <p>prev: {ref.current}</p>
      <p>now: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

console.log의 결과는 다음과 같습니다.



버튼을 클릭할 때마다 빨간색 프레임당 로깅됩니다. 첫 번째 빨간색 테두리는 첫 번째 렌더링 중에 표시됩니다.

결론

React.useEffect와 render의 실행 순서를 의식하지 않았기 때문에, 조금 막혔지만 거기를 의식하면 비교적 간단하게 읽을 수 있을까 생각합니다.

덧붙여서, usePrevious처럼 커스텀 훅스도 할 수 있습니다. 앞으로도 React에서 제공될지도 모르므로, 최대한 커스텀 훅스를 만들어 두는 편이 좋을까 생각합니다. (참조: 후크 관련 FAQ – React )