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

주니어 개발자분께서 이메일 인증 로직에서 인증 시간을 체크하는 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...

현재 회사에서 운영 중인 세 개의 application 중 두 개의 application의 경우 React, 남은 하나의 application는 Vue.js 기반이었습니다. 운영 중인 Vue.js 기반의 application을 React로 포팅할려는 니즈가 있었지만 한 번에 빅뱅 하기엔 시간이 부족하여 점진적으로 React로 포팅하고 신규 기능 페이지의 경우는 미리 React로 구성하기로 했습니다. 그렇다 보니 기존 Vue.js 기반의 application에 React component를 띄워야 했고 이때 사용한 방식을 포스팅하고자 합니다. react → vue 변환 모듈 ※ Vue는 Class Component 형태로 작성되었습니다. ReactDOMClient의 createRoot()를 통해 렌더링 되..

기존에 Vue 2 버전을 쓰는 경우 TypeScript의 도입이 매끄럽지 않지만 TypeScript와 같이 사용하기 위하여 Vue.extend()를 사용하여 객체로 만들어 사용하는 방법과 Class Component 형태로 만들어 쓰는 두 가지 방법 중 하나를 선택하여 사용합니다. 현재 운영 중인 Vue.js기반의 application의 경우는 이 중에서 Class Component로 만들어 사용하고 있으며 Decorator를 좀 더 활용하기 위해 추가로 라이브러리를 이용하여 구성했습니다. 그래서 어떻게 Decorator를 이용하여 Vue Class Component를 어떻게 구성했는지 소개하려고 합니다. Vue Class Component Example 기본적인 Vue Class Component 형태..

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