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

주니어 개발자분께서 이메일 인증 로직에서 인증 시간을 체크하는 timer의 상태 관리에 useRef가 사용되는 걸 보시곤 "상태 관리에는 useState가 쓰이고 useRef는 DOM에 접근할 때 쓰는 것 아닌가요?"라는 질문을 받았습니다. 간단하게 컴포넌트의 생명주기에 따른 상태와 re-render 유무를 설명드렸고 이번 기회에 해당 내용을 간단하게 정리하려 합니다. useState vs useRef보통 useState는 특정 상태 값을 반환하거나 갱신이 필요할 때, useRef는 특정 DOM에 접근하기 위해 많이 사용합니다. 하지만 리액트 공식문서를 보면 추가로 알 수 있는 내용이 있습니다.useRef returns a mutable ref object whose .current property is..

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) { // ..