pqgrid에서 react component re-render시키기

현재 회사는 jqeury 와 react를 섞어 쓰고있는데 이과정에서 리렌더링 타이밍이 꼬이는 경우가 있다.

pqgrid라는 외부 유료 모듈을 사용하는데 이것의 contents들과 react의 것들과 연동이 필요한 내용이 있었다.

개념을 확장하자면 순수 html + javascript단을 사용하는 환경에서 react와의 연동이 필요한 경우라고 생각하면 되겠다.

어쨌던 내가 원할때 리렌더링을 시켜주기위한 트릭을 공유한다.

RerenderTest.tsx

// 자바스크립트 코드
`$("#testInput").on("click",function(){` +
`    var interval_key = setInterval(() => {` +
`    clearInterval(interval_key);` +
`    $("#forceBTN").trigger("click");` +
`}, 2000);` +
`})` +


...
// 강제 리렌더링을 위한 state 초기화
this.state = {
  ...
  forceRerender: false,
  ...
}
...



<button
id="forceBTN"
  onClick={() => {
      this.setState((prevState: any) => ({
      forceRerender: !prevState.forceRerender,
      }));
  }}
  >
  force rerender
</button>

• 위와같이 어떤 버튼에 리렌더링이 포함된 함수 로직을 박아넣고 trigger로 버튼을 클릭하게 만들면
• react와 어떤 모듈안의 javascript가 완벽하게 상호작용하는 트릭이 작동한다!..