BackgroundsFE 개발자 단톡방에 이런 질문이 올라왔습니다.결론부터 말하자면...You Might Not Need a Dispatch Type.해당 타입 사용을 선호하지 않는다기 보다, 사용할 필요가 없다 란 답이 가장 적절하다고 생각했습니다. 그 이유가 무엇일까요?언제 사용되는가?Dispatch은 React에서 useState 훅을 사용할 때 반환되는 상태 업데이트 함수의 타입입니다. 상태 값을 업데이트할 때 사용하는 setState 함수의 타입을 정의하며, React 상태 관리에서 매우 일반적으로 사용되죠. 그렇다면, 해당 타입 정의가 왜 필요할까요? 가장 대표적인 예시는 자식 컴포넌트에 Props로 전달할 때입니다. 부모 컴포넌트에서 useState로 상태를 관리한 뒤, 자식 컴포넌트에서 상..

BackgroundDrag&Drop이 가능한 div 컴포넌트를 구현해야 했습니다. Drag&Drop의 기본 로직은 단순합니다.해당 요소의 위치 상태를 관리하면서요소를 누르면 Drag가 시작되고, 마우스를 움직이면 위치 상태를 변경하고, 마우스를 떼면 Drag를 멈추면 되겠죠.import { useState, useEffect, useRef } from 'react';interface Props { initialTop: number;}const useVerticalDrag = ({ initialTop }: Props) => { const [isDragging, setIsDragging] = useState(false); const [top, setTop] = useState(initialTop); /..

배경 사내 서비스에서 공통으로 사용하는 모듈들을 위한 패키지를 개발하는 도중, 위 에러와 마주쳤습니다. 문제가 된 상황은 다음과 같았습니다. 1. A 패키지는 B, C 프로젝트에서 공통으로 사용하는 모듈들을 제공합니다. 2. 이때 공통으로 사용되는 모듈들에는, 기본 css가 적용된 styled-components가 포함됩니다. 3. B 프로젝트는 A 패키지가 제공하는 styled-components 컴포넌트를 사용합니다. 4. B 프로젝트는 위 컴포넌트뿐만 아니라, 서비스 내 스타일링을 위해 자체적으로 styled-components를 사용합니다. 문제 상황 개발 환경에서는 아무런 문제도 발생하지 않았습니다. A 패키지에서 styled-components를 사용한 react component(편의상 St..

현재 회사에서 chrome extension을 React를 사용해 개발하고 있다. extension에서는 manifest.json의 content_scripts를 통해, 실행 시 자동으로 js 파일을 동작하게 할 수 있다. → 실행할 content-sciprts 파일에서 react를 사용해 페이지를 그려주면 되는 것. // content-script.ts import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.createElement("div"); document.body.appendChild(rootElement); const ro..

현 서비스에서는 react-query를 통해 서버 데이터를 관리하고 있다. https://tanstack.com/query/v4/docs/react/reference/useQuery useQuery | TanStack Query Docs const { data, tanstack.com get 요청을 통해 받아온 데이터는 useQuery hooks를 통해 관리한다. 이때 해당 useQuery는, useQuery를 반환하는 custom hooks를 작성해 재사용할 수 있도록 했다. // useGetPetDetailQuery.tsx export const useGetPetDetailQuery = ( pet_id: number, ) => useQuery( petQueryKey.detail(pet_id), asy..

작년 초 쯤이었을까? api 요청 및 응답 상태 관리를 redux-thunk에서 react-query로 변경해나가기 시작했다. const getBookApi = async () => { const response = await axios.get(URL) return response.data }; const {data} = useQuery('book', getBookApi) 의식의 흐름대로 다음과 같이 썼었는데... 디버깅을 하다보니, 응답에 실패했는데도 아무 곳에서도 에러를 감지할 수가 없었다. 분명 useQuery의 onError 옵션을 통해, 에러 발생을 catch할 수 있다고 되어있는데도! 하지만 곰곰히 생각해보면, 당연한 일이다. 왜? useQuery는 두번째 인자로 넘겨준 queryFn이 반환하..

waterfall problem 현 애플리케이션에서 비동기 통신 관련 로직은 다음과 같이 작성되어 있다. const Detail = ({id}) => { const {data, isLoading} = useQuery(fetchDetail) if(isLoading){ return } return } react-query를 통해 비동기 통신을 제어하며, 이 때 해당 요청의 상태에 맞는 UI를 render한다. (로딩 중일 경우 로딩 컴포넌트를, 완료된 경우 해당 데이터를 전달) 여기서 문제점. const Detail = ({id}) => { const {data, isLoading} = useQuery(fetchDetail) if(isLoading){ return } return ( } 위와 같은 상황에서 ..

약 1년이 조금 넘는 기간 동안, 샵 관리 프로그램을 개발했다. 대부분의 데이터가 사용자의 입력을 통해 생성되는 관리 프로그램의 특성상... form과 관련된 로직을 정말로 많이 다뤘다. 온갖 요구 사항, 예외 케이스들과 마주했고, 이를 구현하기 위해 수많은 방법을 탐구했다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 그리고 내린 결론 → react에서 form 관련 로직을 다룰 때, 이만한 라이브러리는 없다. 유효성 버튼 구현 유효성 버튼이란? → (내 맘대로) 특정 조건이 완료되기 전까지 비활성, 특정 조건 완료 시 활성화 되는 버튼. 필수인 데이터 입력이 완..