React 불변성(feat. useState)

유석현(SeokHyun Yu)·2022년 11월 21일

정보

목록 보기

4/9

서론

React를 배우고 있던 와중에 특이한 일이 하나 생겼다.

import React from "react";
import { useState } from "react";

export default function AppXY() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div
      className="container"
      onMouseMove={({ clientX, clientY }) => {
        setPosition((prev) => {
          prev.x = clientX;
          prev.y = clientY;

          return prev;
        });
      }}
    >
      <div
        className="pointer"
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          color: "red",
        }}
      >
        mouse
      </div>
    </div>
  );
}

이 컴포넌트는 마우스가 움직이면 event객체로부터 x, y 좌표를 받아서 "pointer" 클래스를 가진 div요소가 그 좌표대로 translate하면서 따라다닌다.

하지만 위 코드는 원하는대로 작동하지 않는다.

이유를 찾아보니, React가 setPosition 콜백에서 리턴하는 객체(prev)의 참조값과 인자로 받는 이전 상태값(prev)의 참조값을 비교(얕은 비교)한 뒤 값이 같으면 막아놓은 것이었다.

그렇게 해야 이전 상태값의 불변성이 유지되기 때문이다.

따라서 다음과 같이 코드를 작성해야 한다.

import React from "react";
import { useState } from "react";

export default function AppXY() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div
      className="container"
      onMouseMove={({ clientX, clientY }) => {
        setPosition((prev) => {
          prev.x = clientX;
          prev.y = clientY;

          return {...prev}
        });
      }}
    >
      <div
        className="pointer"
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          color: "red",
        }}
      >
        mouse
      </div>
    </div>
  );
}

이렇게 하면 prev와 {...prev}의 참조값은 다르기 때문에 React에서 통과를 시켜준다.

하지만 의문이 드는 점이 있다.

prev.x = clientX 이런식으로 return 되기 전에 prev객체의 프로퍼티 값을 바꿀 수 있는데 리턴되는 객체의 참조값만 비교해서 불변성을 유지한다고 할 수 있을까?

실제로 콘솔을 찍어보면 setPosition에서 객체를 return 해주기 전에 position의 상태가 바뀌는 것을 볼 수 있다.

import React from "react";
import { useState } from "react";

export default function AppXY() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  console.log("🚀 ----------------------🚀");
  console.log("🚀 ~ position1", position);
  console.log("🚀 ----------------------🚀");

  return (
    <div
      className="container"
      onMouseMove={({ clientX, clientY }) => {
        setPosition((prev) => {
          console.log("🚀 ----------------------🚀");
          console.log("🚀 ~ position2", position);
          console.log("🚀 ----------------------🚀");
          prev.x = clientX;
          prev.y = clientY;

          console.log("🚀 ----------------------🚀");
          console.log("🚀 ~ position3", position);
          console.log("🚀 ----------------------🚀");
          //   return prev;
          return { ...prev };
        });
      }}
    >
      <div
        className="pointer"
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          color: "red",
        }}
      >
        mouse
      </div>
    </div>
  );
}