focus 시에만 화면 업데이트 되는 이유 + 해결방법

Question

웹소켓 커넥션은 유지되어 데이터까지 들어오지만 view update는 브라우저 focus되어야만 발생하는걸 보여주셨는데요   원인과 대중적인 해결방법이 있는지 궁금합니다 (사파적 방식x, 대중적인 정파적 방식o)

zerocho · Answer

이거 예전 질문에서 제가 코드를 잘못 짰던 것으로 결론났던 걸로 기억합니다. 불변성이 지켜지지 않아서(기존 객체의 참조 관계가 유지돼서) 리렌더링이 발생하지 않아 업데이트가 안 되었던 것 같네요. 참고로 대중적인 방식이라는 것은 없습니다. 프로그래밍 세계에서 대다수가 취하는 방식이 무엇인지를 알 방법이 없습니다. 의견 취합해서 투표하는 곳도 없고요 ㅎㅎ

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. Eric J님, 질문해 주신 사항에 대해 답변 드립니다. 웹소켓 연결이 유지되면서도 화면이 업데이트되지 않는 현상은 아마도 웹페이지의 상태 변경이 뷰에 반영되지 않아서 발생할 수 있습니다. 이는 주로 상태 관리를 제대로 하지 않아서 발생하는 경우가 많습니다. 이러한 문제를 해결하기 위한 대중적인 해결 방법은 다음과 같습니다: 상태 관리 라이브러리 사용 : Redux , MobX , 또는 Context API 등 상태 관리 라이브러리를 사용하여 상태를 전역적으로 관리하고, 상태가 바뀔 때마다 뷰가 업데이트되도록 합니다. 상태의 불변성 유지 : React는 상태 변경을 감지할 때 얕은 비교를 하기 때문에 상태가 변경되었음을 React가 알아차리게 하려면 상태를 불변하게 유지하는 것이 중요합니다. immer 라이브러리를 사용하면 상태의 불변성을 쉽게 관리할 수 있습니다. React Hooks의 적절한 사용 : useEffect 나 useCallback 을 적절히 사용하여 상태나 prop이 변할 때마다 필요한 작업을 수행하고, 적절히 리렌더링이 되도록 합니다. 관련된 게시물을 확인하실 수 있는 링크는 다음과 같습니다: - DM 채팅하기 질문드립니다. 이 게시물에서는 useCallback 을 통해 상태 변경 시 리렌더링이 제대로 되지 않는 경우와 상태의 불변성을 유지하는 것에 대한 해결 방법을 제시하고 있습니다. 혹시 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.