IT/React + TypeScript

React+ Redux 자식 컴포넌트에 connect시 ref 접근방법 (redux 6버전 이상)

차가운남자 2019. 6. 10. 11:32

많이는 아니지만 가끔식 자식 컴포넌트에 Ref 값을 받아서 처리해야 되는 부분이 있는데

Redux으로 하였을시 호출이 불가능하다.

Redux 6 버전 이전에는 withRef를 사용하였으나

connect(null, null, null, { withRef: true })(ChartsComponent);

Redux6 버전에서는 withRef 제거  ------> forwardRef로 변경되었음

ref={ref => this.chartsComponent = ref }

connect(null, null, null, { forwardRef: true })(ChartsComponent);

아래와 같이 Redux 문서에는 

Note : We do not use getWrappedInstance() now 

this.chartComponent.current.getWrappedInstance() 6버전 이전꺼는 선언후 withRef를 사용할수 있다.

The withRef option to connect has been replaced with forwardRef. If{forwardRef : true}has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.