리액트 훅 연습 겸 기존에 코드 작성했던것을 리액트 훅으로 변경해보았다..
결과는 망함.... 훅 자체는 어렵지않았다.
useState, useEffect, useContext(mobx-react-lite 조합 굿굿굿)!!
하지만 socket.io로 실시간 통신을 끼얹으니... 내 생각 범위를 벗어나는 일이 벌어져버렸다.. 솔직히... 거의 이것에 시간을 소비하였다..
처음에 mobx store로 만들어서 useContext로 보내도 보고..
컴포넌트 형태로도 만들어보고...
문제는 socket.io를 정의가 된 곳에서 통신을 전부 보내버린다는것이다..
이게 무슨말이냐면..
예를 들어 Home과 Meet 페이지가 있다고 가정하자.
Home(통신) => Meet(통신) : 여기서 Home(통신이 중첩되어서 2번 소켓으로 emit한다....) => 뒤로가기를 누르면.. (Home+Meet+Home 총 3번 소켓으로 통신..)
통신이 계속 중첩되어버린다는것...!!!
그래서 생각해본게 socket이 실행될때마다 해보자?
useEffect(() => {
return () => {
어쩌고저쩌고
}
}, [socket])useEfect안에 socket을 넣었더니 통신 올때만 반응하기때문에.. 이것 역시 아니었다.
그럼 조건문을 넣어서... 해볼까??
const [_isMounted, set_isMounted] = useState(참과 거짓)이것으로 마운트 될때 true, 언마운트되면 false를 줘서 socket의 실행을 제한해보았다.
물론 훅에서 저런식으로 설정을 할 필요성이없다...
useEffect 뒤에 [타겟 실행을] 해주면 되기때문이다!!
그래도 해보았다... 모르면 몸이 고생하는법!!
역시 실패...
아니면 임시방편으로 현재 값과 받는 값이 같다면 emit 또는 on을 하지말아라고 해볼까??
거의 해결책에서 거의 근접은 한거 같은데..... 보내기와 받기 전에 내가 그것을 제어한다?? 라는 접근 방식이었다..
음.. 근본적인 문제해결이 아니다...
내 능력 밖에 일로 번져버려서.. 다시 클래스 형태로 가련다... 하아..
내 주말 2일 안녕...... ㅠㅠ
결론
개념을 좀 더 쌓고 도전해봐야겠다.. 포기한것은 아니다!!
혹시 이 글을 보신분은 해결책(?) 또는 이런식 저런식으로 하면 될꺼같다(?)라는 의견을 남겨주시면 한 번 해보겠습니다!!!!
정확하지않아도 좋아요!!
-- 추가 socket.io에는 수신용 버퍼가 따로 존재하는거같다.. 데이터를 받을때 콘솔로 찍어보면 그 전 데이터값까지 나오고 값을 직접 불러다사용하면 최근 값이 사용된다!! 콘솔로만 찍어본 내 잘못이었다... 하아ㅠㅠ
버퍼 크기 제한 및 업데이트 주기는 서버에서 추가가능하다.. 하지만 굳이? 지금은 손 쓸필요는 없어보인다..
