React

버튼을 누르면 moon 이라고 적혀있던 버튼이 lee로 바뀌도록 함수를 구현했는데

state 객체의 값이 변경되어도 화면이 갱신되지 않는다.

import { useState } from "react" ; 

export default function Hello() {
   const [user, setUser] = useState({id:1,name:"moon"}) ;
   function test(){
      user.name="lee"; 
      setUser(user);
   }
   return (
      <button onClick={test}>{user.name} </button>
   )
}

버튼을 누르면 test 함수가 실행되어서 user.name을 lee로 바꾸고

그것이 화면에 갱신이 되어야 하는데 버튼을 눌러도 그대로 변하지 않는다.

 

그 이유는 객체는 주소를 저장하기 때문이다.

주소가 가리키는 곳에서는 name이 변했지만 주소가 그대로이기 때문에

setUser 입장에서는 변한 것이 없으므로, 화면을 refresh 하지 않는다.

변경하고 싶다면 객체를 새로 만들어야 한다.

 

import { useState } from "react" ; 

export default function Hello() {
   const [user, setUser] = useState({id:1,name:"moon"}) ;
   function test(){
      user.name="lee"; 
      let NewUser = {...user, name:"lee"};  //새로운 객체 생성
      setUser(NewUser); 

   }
   return (
      <button onClick={test}>{user.name} </button>
   )
}

그 결과 moon 이라고 적힌 버튼을 클릭하면 lee라고 적힌 버튼으로 갱신된다.