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

Recoil 관련 포스팅을 남긴 이후 다른 업무로 인해 사이드로 진행하던 레거시 프로젝트의 Recoil 포팅 작업이 멈춘 상태였습니다. 다시 작업을 시작하려는데 더 이상 Recoil을 사용하지 않는다는 관련 레퍼런스들을 읽고 해당 내용을 정리하게 되었습니다. Recoil을 선택했던 이유기존 React를 사용한 프로젝트에서 상태 관리를 위해 Redux를 도입하여 사용 중이었습니다. 하지만 Redux를 사용하다 보니 계속 생산되는 보일러 플레이트 코드, 신규 입사자들의 러닝 커브 등의 문제가 있었습니다. 사실 이러한 이유보단 규모가 작은 project에서 Redux 사용을 위해 설정하는 상황에서 배보다 배꼽이 큰 느낌을 항상 받았었습니다. 그런 상황에서 Recoil은 좋은 선택지가 되었습니다. Recoil을..

이전 useState와 useRef를 비교하는 포스팅에서 useState의 값의 변화와 re-render의 과정이 비동기적으로 이루어진다고 했는데 useState의 set에서 함수형 업데이트를 통해 동기적으로 사용하는 방식에 대해 살펴보려 합니다. useState 비동기적 set 함수예시코드를 간단하게 확인해보겠습니다.import { useState } from "react";function HooksTest() { const [count, setCount] = useState(0); const updateCount = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( ..

데이터로 String화된 HTML을 React에서 적용 시 dangerouslySetInnerHTML를 사용합니다. 네이밍부터 dangerously가 들어가지만 무심코 사용하는 dangerouslySetInnerHTML에 대해 알아보겠습니다. dangerouslySetInnerHTML?dangerouslySetInnerHTML은 React에서 innerHTML을 사용하기 위한 방법으로 String으로 된 HTML을 그대로 사용하는 것을 막고 __html 키로 객체를 전달해 사용합니다.function Component() { const markup = 'some raw html'; return ;}export default Component; 예시에서 확인할 수 있듯이 dangerouslySetIn..

기존 레거시 프로젝트를 리팩토링하면서  Recoil을 도입하게 되었습니다. 이전에 React 프로젝트에서는 Redux을 사용했기 때문에 팀 내부에도 기술전파가 필요하여 내용을 정리하게 되었습니다. Recoil?Recoil은 Facebook 팀에서 만든 상태 관리 라이브러리로 공식 페이지에서도 확인할 수 있듯이 Recoil을 React를 위한 상태 관리 라이브러리로 표명하고 있습니다. Recoil에서는 atom이라는 상태 단위와 selector라는 파생된 상태를 나타내는 순수 함수를 통해 상태를 나타냅니다. 자세한 내용은 사용 방법에서 알아보겠습니다. Recoil vs ReduxRedux는 Flux 아키텍처를 베이스로 만들어진 상태 관리 라이브러리로 트리 형태의 store 구조를 가집니다. 비동기 처리를 ..

React 18버전에서 새로 나온 hooks인 useTransition을 이번에 사용하게 되어 팀 내에서도 공유하고 포스팅도 하게 되었습니다. useTransition와 비슷한 역할을 가진 useDeferredValue도 같이 알아보겠습니다. useTransition?React 공식 홈페이지에서 useTransition 설명은 다음과 같습니다.useTransition is a React Hook that lets you update the state without blocking the UI.useTransition 은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다. useTransition은 파라미터를 받지 않고 isPending, startTransition 두 개의 값을 ..

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

React Query를 도입하여 사용 중에 Query Key에 대한 관리의 필요성을 느꼈습니다. 팀 내부에선 Query Key를 Array 형태로 사용하기로 컨벤션이 잡혀 있었는데 사용자가 Array 내부의 key 요소를 잘 못 입력을 하거나 order가 잘 못 되는 경우가 발생할 수 있었기 때문입니다. 그리고 아래의 예시처럼 특정 ID를 key의 요소로 사용하거나 key의 요소가 많을 경우 그러한 실수는 더 많이 발생할 수 있습니다. ... export const useGetUserDetail = (userID: string) => { const context = useQuery( // 지정할 key의 요소가 많은 케이스 ['user', 'detail', 'info', userID], async () ..

Store에서 서버 상태 관리(비동기 처리 상태 관리) 분리를 위해 React Query를 도입하게 되었습니다. 이전 포스팅을 통해 여러 서버 상태 관리 라이브러리를 비교했고 팀원들의 의견에 따라 React Query를 선택하게 되었습니다. React Query를 현재 프로젝트에 도입하여 사용한 내용을 정리해 보았습니다. 기본 셋업 React Query를 설치합니다. (React v16.8 이상 호환됩니다.) npm i react-query # or yarn add react-query React Query Provider를 main에 선언합니다. // main.tsx ... import { QueryClient, QueryClientProvider } from '@tanstack/react-query'..