react - websocket 연동 시, state 변수 참조 불가한 문제입니다.

Question

웹소켓으로 데이터를 제공받아 실시간으로 화면을 업데이트 중입니다. 데이터는 컴포넌트 내에 useState 활용해서 배열을 저장하고 있습니다. useEffect에 deps를 빈 배열로 줘서, 로딩이 완료되면 자동으로 웹소켓 연결 후 데이터를 갱신합니다 데이터를 받을 때 마다 갱신해줘야 하기 때문에.. websocket에서 메시지가 올 때 마다 콜백으로 업데이트를 해줍니다.const WebSocket &#61; require('isomorphic-ws'); ... const [list, setList] &#61; useState([]); const startWebSoc &#61; () &#61;> { const webSocket &#61; new WebSocket(&#34;wss://url&#34;); webSocket.addEventListener(&#34;message&#34;, (event) &#61;> { // 웹소켓으로부터 제공받은 데이터 업데이트 로직 setList(newList); // updateObj() <- 문제가 되는 부분 }); } useEffect(() &#61;> { startWebSoc(); }, []); 위에서 문제가 되는 부분의 updateObj 라는 메서드의 내용을 보면..const updateObj &#61; () &#61;> { console.log(list.length); }; 요렇게 웹소켓 콜백 부분에서 업데이트를 해줬던 list를 참조하려고 하면 내용이 비어있습니다. useState의 경우 비동기이므로, 바로 적용이 안될 수 있다는 것은 당연히 감안을 하고 있습니다만은.. 문제는 영원히 list.length는 0으로 나옵니다. 반면에 JSX 상에서 list.length를 출력해보면 데이터가 제대로 나오는데요. 문제는 데이터를 JSX로 바로 뿌려주는게 아니라, 저 list데이터를 재가공해서 다른 객체에 넣은 다음, 이 객체를 활용해서 JSX에 뿌려줍니다. 이 가공되는 객체를 만드는게 updateObj()입니다. 근데 updateObj() 내부에서 업데이트된 list를 못읽어버리니, 결론적으로 JSX에 뿌려주지를 못하는 상황입니다. 웹소켓은 처음이라 이런 경우가 처음인데.. 혹시 겪어보신 분 계신지요? 또한 웹소켓으로 받은 데이터 뿐만 아니라, 다른 메서드에서 업데이트한 state 변수 모두가 참조 시 의도한 대로 동작하지 않습니다.const [listA, setListA] &#61; useState([]); const [listB, setListB] &#61; useState([]); const [listC, setListC] &#61; useState([]); const [listD, setListD] &#61; useState([]);이렇게 여러 메서드에서 리스트를 업데이트하는데, updateObj()에서는 저 변수들이 모두 필요한데, 모두 length를 찍어보면 0이 출력되네요.. 힌트라도 부탁드립니다 ㅠㅠ

오키동키 · Accepted Answer

setList는 비동기이기때문에 setList가 호출된 직후 updateObj()를 호출하면 당연히 값이 안들어있을 수밖에 없습니다.해결방법은 useEffect(() &#61;> { startWebSoc(); }, []);밑에 또하나의useEffect(() &#61;> { if (list.length &#61;&#61;&#61; 0) return updateObj() }, [list]);useEffect를 만들어 list값이 바뀔때마다 호출되는 로직을 따로 구성하시는 방법이 있습니다

원숭이부대 · Answer

우선 지금 생각중인거는 useEffect의 deps 배열에 저 변수들을 넣고.. 웹소켓에서 업데이트하면 알아서 갱신되는걸 생각중이긴 한데 저 값들이 왜 안보이는지가 궁금하군요

원숭이부대 · Answer

오키동키 // 넵.. 그래서 본문에 관련 내용을 적어놓기는 했는데요 useState의 비동기 문제는 아니었고, 스코프 문제인 것으로 보입니다 구글링으로 해결방법은 찾았는데, 조금 더 공부가 필요하겠네요

react - websocket 연동 시, state 변수 참조 불가한 문제입니다.

3개의 답변

Q&A 목록