오픈소스 [React-flow-renderer] useZoomPanHelper 사용법

오픈 소스 react-flow-renderer를 사용하다가 zoom 기능이 필요해 useZoomPanHeler를 사용하려 했으나

 

const { zoomIn } = useZoomPanHelper();  을 하면 되지 않았음

 

이유를 알아보니

<ReactFlowProvider> 안에서 제공되는 기능인데 

 

이전에 사용하려 해서 그랬음. 

 

해결법을 말하자면 DataFlowMainComponent.tsx를 가기전 인 FlowMain에서

 

<ReactFlowProvider>로 먼저 감싸주고 기존 DataFlowMainComponent.tsx에 있던 <ReactFlowProvider>는 지움

 

const { zoomIn } = useZoomPanHelper();를 사용하니 매우 잘됨

 

이게 Hooks의 단점인듯. 

 

오픈소스 원본 출처 

 

reactflow.dev/examples/use-zoom-pan-helper-hook/