useEffect()의 종속성 배열에 canvas.current를 넣으면 안티패턴이며 이에 대한 경고가 표시됩니다.
'canvas.current'와 같은 mutable value는 valid dependencies가 아니다.
mutating은 컴포넌트를 리렌더링하지 않기 때문이다.
Vitali Zaidman의 이 기사에서 지적했듯이, "component가 useRef를 사용하여 'ref.current'에 마운트(해제)되었다가 연결된 경우 콜백 또는 렌더러가 없습니다."
당신이 사용하고 싶은 것은 사실 callback()를 사용하는 것입니다.
useCallback()을 통해 최신 캔버스 DOM reference가 반환되면 centerX 및 centerY를 설정하여 대응할 수 있습니다. 제안하신 대로 useState()를 사용하여 이러한 변수를 state로 추적할 수 있습니다.
const [centerX, setCenterX] = useState(null);
const [centerY, setCenterY] = useState(null);
const canvasRef = useCallback((canvasNode) => {
setCenterX(canvasNode.width / 2);
setCenterY(canvasNode.height / 2);
}, []);
...
return (<canvas ref={canvasRef} />);
TypeScript
복사
