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이 반환하..