내가 레퍼런스가 되자 내가 레퍼런스가 되자

React base의 프로젝트에서 작업 중 DOM 노드의 크기에 따라 state 값이 바뀌는 로직을 짜야 되는 경우가 종종 발생합니다. 그럴 때 "useEffect의 dependency에 useRef의 current를 맵핑하는 것이 맞나?"라는 생각을 하게 됩니다. useRef에선 리렌더링이 일어나기 전까진 값의 변화 추적이 안되기 때문에 문제가 발생할 수 있습니다. 해당 케이스에선 어떻게 처리할지 알아보겠습니다. useEffect dependency로 ref 연결 케이스 확인을 위한 예시코드를 작성해보겠습니다. import { useEffect, useRef, useState } from 'react'; ... function Component() { const [isBasicState, setIsBa..

Vue.js legacy 코드를 React로 porting 하면서 기존에 사용 중이던 video.js에서 warning이 뜨는 현상이 발견되었습니다. The YouTube player is not attached to the DOM. API calls should be made after the onReady event. 디버깅을 하다 보니 video.js를 Cleanup 하는 상황에서 해당 warning이 발생하였습니다. ... const videoPlayer = useRef(null); useEffect(() => { videoPlayer.current = videojs(video.current!, options()); return () => { if (videoPlayer.current) { // ..