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

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

Store에서 전역 상태 관리뿐만 아니라 서버 상태 관리(비동기 처리 상태 관리)에 대한 처리도 같이 하다 보니 Store가 너무 비대해지는 현상이 발생했습니다. 이에 따라 전역 상태 관리와 서버 상태 관리를 분리시켜 Store의 경량화를 위해 서버 상태 관리 라이브러리를 찾아보게 되었습니다. 관련 라이브러리 레퍼런스가 가장 많은 React Query와 SWR 그리고 현재 RTK(Redux Toolkit)를 사용 중이기 때문에 RTK Query 이렇게 도입을 위해 세 라이브러리를 비교해 보았습니다. React Query https://react-query.tanstack.com/overview SWR https://swr.vercel.app/ko RTK Query https://redux-toolkit...

작업 중 Reference type(object or array)의 state를 Selector를 통해 변환하여 사용하는 경우 아래와 같은 warning을 접할 수 있습니다. Selector customSelector returned a different result when called with the same parameters. This can lead to unnecessary rerenders. Selectors that return a new reference (such as an object or an array) should be memoized // warning example export const conformUserSelector = (state: RootState) => { ret..

도입하여 사용한지는 꽤 됐지만 현재 도입하여 사용 중인 상태 관리 기술 스택 중 하나인 Redux Toolkit에 대해 이야기하려고 합니다. 기존에 Redux를 사용하며 겪었던 여러 이슈들이 있었습니다. 복잡한 환경설정, 추가로 설치해야 하는 수많은 서드파티 라이브러리, 불어 나는 Boilerplate 등 Redux를 제대로 쓸려면 꽤나 많은 부분에 대해 신경을 써야 했습니다. 하지만 Redux Toolkit이 나와 도입을 하면서 이런 점들이 많이 해소될 수 있게 되었습니다. Redux Toolkit 셋업 ※ Redux Toolkit을 RTK로 줄여서 명시하며 TypeScript 환경에서 예시를 보이겠습니다. store부터 구성해보겠습니다. RTK에서 제공하는 configureStore를 이용하여 구성하..

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