[React] setState callBack 함수

SleepyWoods 프로젝트를 진행하면서 전체 채팅 기능을 구현했었다.

 

전체 채팅을 담당하는 Chat 컴포넌트에서 지역상태로 전체 채팅 데이터를 가지도록 했는데 코드를 보면 다음과 같다.

 

const [chatDatas, setChatDatas] = useState<chatType[]>([]);

// 채팅 업데이트
const updateChat = (chat: chatType) => {
  ...
  chat.timestamp = calcTimeFromMs(chat.timestamp);  // timestamp을 포멧팅하는 함수 호출
  setChatDatas([...chatDatas, chat]);
};
  
type chatType = {
  type: string;
  timestamp: string;
  nickname: string | number;
  message: string;
};

코드에 대한 설명을 간단히 하먄updateChat이라는 함수는 socket으로 다른 유저의 채팅이 왔을 때, 내가 채팅을 보냈을 때 호출되고 사용자가 입력한 값이 가공되어 chatType이라는 type의 형태로 setChatDatas에 의해 관리되는 형식이다.

 

하지만 위처럼 코드를 작성했을 때, socket을 통해서 다른 유저의 채팅을 받고 상태를 변경하는 과정에서 chatDatas가 이전 값을 가지고 있는 문제가 발생했고...

 

결과적으로 useState의 set 함수 setChatDatas의 인자로 콜백 함수를 넘겨줌으로써 해결했습니다.

setChatDatas(chatDatas => [...chatDatas, chat]);

 

 

이러한 문제는 useState가 비동기로 동작하기 때문이었고, useState의 set 함수의 인자로 콜백 함수(익명 함수)를 넘겨주게 되면 동기적으로 동작하도록 유도할 수 있었다.

 

+ useState 특징

1. 비동기로 동작
2. 내부적으로는 BATCH 처리
3. 새로운 state를 반환하는 함수를 인자로 넘길 수 있음