[React Native] 객체 형태의 State 값 변경하기

코드

---

Server

/* 매칭 되었을 때 */
socket.on("matching", (data) => {
    ... 중략 ...
    
    io.to(socket.roomNumber).game = {
        dices: [],
        rollCount: 0,
    };
      
    // 나를 제외한 방에 있는 사람들에게 turn 부여
    socket.broadcast.to(socket.roomNumber).emit("submit", true);
});


socket.on("roll", (data) => {
    ... 중략 ...
    
    io.to(socket.roomNumber).emit("roll", io.to(socket.roomNumber).game);
    /* console.log(io.to(socket.roomNumber).game);
        io.to(socket.roomNumber).game : {
            dices: [1, 3, 4, 2, 5],
            rollCount : 1,
        }
    */
  });

 

Client

const [game, setGame] = useState({
    isTurn: false,
    dices: [],
    rollCount: 0,
});

... 중략 ...

socket.on("submit", (turnData) => {
/*
	turnData 값을 game.isTurn에 저장
*/
});

socket.on("roll", (data) => {
/*
	data.dices 값을 game.dices에 저장
    data.rollCount 값을 game.rollCount에 저장
*/
});

 

 

 

이슈

---

Client에서 받는 turnData와 data의 값은 제대로 전달됨.

객체(game)의 속성값을 받은 데이터로 변경하려고함.

 

match시 isTurn값이 true로 바뀌고,

다음 동작인 roll시 dices와 rollCount값을 받은 값으로 바꿔준다.

 

이때, 객체의 값을 변경하기위해 두가지 방법을 사용했었다.

 

1. cloneDeep

const temp = _.cloneDeep(game);
temp.dices = data.dices;
temp.rollCount = data.rollCount;
setGame(temp);

 

2. 

setGame({ 
    ...game,
    dices: data.dices,
    rollCount: data.rollCount
 });

 

그런데, roll 핸들러 내에서 game객체를 확인해보면 isTurn 값이 false로 바뀌어있다..

 

 

 

해결방법

---

setGame((prev) => ({
    ...prev,
    dices: data.dices,
    rollCount: data.rollCount,
 }));

일단 위 코드로 해결하긴 했는데, 기존의 코드가 안됐던 이유를 아직까지 찾지 못했다.