useState에서 state값 저장 이후 API request하기

React로 프론트를 개발하다보면, api request를 하기전에 state 값이 set되지 않아서 request시 body나 parmater에 담겨와야되는 정보가 null이나 state를 정의할 당시의 default값으로 들어오는 경우가 종종 발생한다. 물론 다른 이유로 인해 안 담겨오는 경우도 있지만, 대부분의 경우는 React의 생명 주기(LifeCycle)만 제대로 지키면 발생되지 않을 문제이기도 하다.

 

리액트 생명 주기 출처) https://jistol.github.io/frontend/2018/12/10/react-lifecycle-methods/

 

React LifeCylcle에 대해서는 이번 포스트의 주제와는 살짝 벗어나므로 다른 포스트에서 다뤄보겠다. 

 

useEffect(() => {
    if (token) {
      const socket = io(`${process.env.REACT_APP_API_URL}/message`);
      setSocket(socket);
      return () => {
        socket.close();
      };
    }
  }, [token]);

 

위와 같이 useEffect로 token이 존재할 시, socket을 정의하고, state로 저장하는 코드를 작성하고, 다른 부분에서 socket을 ridgeState로 불러와서 사용하는 방식으로 구성하였는데 socket state에 socket이 set되기 이전에 socket.emit이 작동해서 실제로는 null.emit으로 되어 소켓이 연결되지 않았는 문제가 발생하였다.

 

useEffect(() => {
    if (token) {
      const socket = io(`${process.env.REACT_APP_API_URL}/message`);
      setSocket(socket, () =>
        socket.emit('joinRoom', { userId: id, accessToken: accessToken })
      );
      return () => {
        socket.close();
      };
    }
  }, [token]);

 

setSocket(socket) 안에 socket이 정의된 다음 실행할 코드를 넣는 방식으로 해결하였다.

 

setState(state, () => { 
    //실행 시킬 활동 
  }
);