[React] useState(2) : 참조형 데이터 값 리렌더링

 

 

[JS] 데이터의 불변성 : 원시 데이터, 참조형 데이터

 

데이터 불변성 때문에 생기는 문제..!

 

import { useState } from "react";

function App() {
  const [obj, setObj] = useState({
    name: "미나토",
    age: 20,
  });

  const reName = () => {
    obj.name = "요리";
    setObj(obj); {/*setObj 에 새 값을 할당*/}
    console.log(obj);
  };

  return (
    <div>
      {obj.name}
      <button onClick={reName}>RENAME</button>
    </div>
  );
}

export default App;

 

버튼을 클릭하면 이름이 바뀌도록 설정했다.

하지만 obj.name 이 바라보는 주소값은 바뀌어도

obj 가 바라보는 주소값은 변하지 않았기에

리액트는 setObj 가 바뀌지 않았다고 생각해 리렌더링을 실행하지 않는다.

 

 

 

콘솔에는 바뀐 값이 잘 찍힌다 ~ 리렌더링만 안되는 것~

 

 

❗️ 이 문제를 해결하려면 새 객체를 만들어서 넣어줘야 한다!
아예 새 주소를 바라보도록!

값이 같아도 새 주소를 연결하는 객체의 특성을 이용!

  const reName = () => {
    const obj2 = { ...obj }; {/*obj를 복사해 obj2 에 넣어준다.*/}
    obj2.name = "요리";
    setObj(obj2);
  };

 

새 객체인 obj2 로 setObj 를 바꿔준다.

 

👀 주의) 스프레드 문법을 쓰지 않으면 그대로 같은 주소를 연결해 원본 값도 바뀐다.