[ React Natvive ] dispatch util 함수에서 불러서 사용

요즘 계속 안드로이드 요구사항을 작업하다가, 오랜만에 react 로 된 웹페이지 요구사항이 들어왔다.

 

소켓 연결에 상태에 따른 버튼 추가 및 재연결 요청사항이었는데

 

오랜만에 리액트 코드를 보게되서 설렜다.

 

기본 원리는 redux 에 socket connected state 값을 하나 추가해주고, dispatch 를 통해 값을 바꿔주는 식으로 적용했다.

 

useDispatch  훅을 분리된 소켓 모듈에서 바로 import 해줘서 쓰지 못하기때문에,

 

App.tsx 에서

export const socektConnectedRef = React.createRef();

선언 후, App.tsx에서 ref값을 하나

socektConnectedRef.current =(connected)=>{ dispatch(setSocketConnected({ socketConnected: connected}));}

함수를 선언해주고

 

해당 소켓 모듈에서 

function error_handler(err) {

insert_system_message('error', 'socket.io error : ' + err.toString());

console.log('fnChat.js > socket.io error > err = ', err);

try {

socektConnectedRef?.current(false);

} catch (error) {

console.log("socektConnectedRef error :::",error);

}

}

이런식으로 사용해주었다.

 

리넥으로 앱을 할때는 ref값을 많이 사용하지 않도록 지양했고, 전역으로 쓰는 ref값을 맥시멈 4~5개로 제한했었는데, 

 

지금 웹뷰에 붙어있는 웹에선 전역 ref값을 하나만 사용중이라 이런식으로 처리했다.

 

당연히 소켓 연결상태에 따른 뷰변화는

 

const socketConnected = useSelector((state) => state.langData.socketConnected);

을 통해 적용했다.

 

안드로이드를 하면서 많이 느끼는거지만, js 가 좋다.