dev/React44 You Might Not Need a Dispatch<SetStateAction> Type. BackgroundsFE 개발자 단톡방에 이런 질문이 올라왔습니다.결론부터 말하자면...You Might Not Need a Dispatch Type.해당 타입 사용을 선호하지 않는다기 보다, 사용할 필요가 없다 란 답이 가장 적절하다고 생각했습니다. 그 이유가 무엇일까요?언제 사용되는가?Dispatch은 React에서 useState 훅을 사용할 때 반환되는 상태 업데이트 함수의 타입입니다. 상태 값을 업데이트할 때 사용하는 setState 함수의 타입을 정의하며, React 상태 관리에서 매우 일반적으로 사용되죠. 그렇다면, 해당 타입 정의가 왜 필요할까요? 가장 대표적인 예시는 자식 컴포넌트에 Props로 전달할 때입니다. 부모 컴포넌트에서 useState로 상태를 관리한 뒤, 자식 컴포넌트에서 상.. 2024. 10. 29. Drag&Drop 컴포넌트에서 클릭 이벤트와 드래그 이벤트 분리하기 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); /.. 2024. 8. 1. Cannot read properties of null (reading 'useContext') 에러 해결 배경 사내 서비스에서 공통으로 사용하는 모듈들을 위한 패키지를 개발하는 도중, 위 에러와 마주쳤습니다. 문제가 된 상황은 다음과 같았습니다. 1. A 패키지는 B, C 프로젝트에서 공통으로 사용하는 모듈들을 제공합니다. 2. 이때 공통으로 사용되는 모듈들에는, 기본 css가 적용된 styled-components가 포함됩니다. 3. B 프로젝트는 A 패키지가 제공하는 styled-components 컴포넌트를 사용합니다. 4. B 프로젝트는 위 컴포넌트뿐만 아니라, 서비스 내 스타일링을 위해 자체적으로 styled-components를 사용합니다. 문제 상황 개발 환경에서는 아무런 문제도 발생하지 않았습니다. A 패키지에서 styled-components를 사용한 react component(편의상 St.. 2024. 1. 16. react-dom의 root.render()를 여러 번 호출하면 어떤 일이 생길까? 현재 회사에서 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.. 2024. 1. 4. useQuery data type 지정하기 (feat. 관심사 분리) 현 서비스에서는 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.. 2023. 8. 16. react-query와 error 전파 handling 작년 초 쯤이었을까? 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이 반환하.. 2023. 8. 16. Suspense를 통한 Render-as-you-fetch 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 ( } 위와 같은 상황에서 .. 2023. 8. 16. React Hook Form 기반 유효성 버튼 구현 약 1년이 조금 넘는 기간 동안, 샵 관리 프로그램을 개발했다. 대부분의 데이터가 사용자의 입력을 통해 생성되는 관리 프로그램의 특성상... form과 관련된 로직을 정말로 많이 다뤘다. 온갖 요구 사항, 예외 케이스들과 마주했고, 이를 구현하기 위해 수많은 방법을 탐구했다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 그리고 내린 결론 → react에서 form 관련 로직을 다룰 때, 이만한 라이브러리는 없다. 유효성 버튼 구현 유효성 버튼이란? → (내 맘대로) 특정 조건이 완료되기 전까지 비활성, 특정 조건 완료 시 활성화 되는 버튼. 필수인 데이터 입력이 완.. 2023. 8. 16. react에서 long press 구현하기 웹에서 long press를 구현할 일이 생겼다. 원했던 기능은 타임 테이블에서 꾹 누르기 + 드래그를 통해 예약하고자 하는 날짜를 지정하는 것! PC에서는 drag만 있어도 해당 기능을 구현할 수 있지만, tablet에서는 스크롤 이벤트와 drag 기능이 중첩되어 의도한 동작이 이뤄지지 않기 때문에... long press를 추가해 이를 해결하고자 했다. 기본적인 long press의 개념은 1. 사용자가 화면을 누른 상태에서, 지정 시간이 지난 후에야, 특정 동작이 수행된다. 2. 지정 시간이 흐르기 전에 사용자가 화면에서 손을 떼면, 특정 동작이 수행되지 않는다. 우선, 화면을 눌렀을 때/손을 땠을 때는 pointer event를 통해 감지할 수 있다! https://ko.javascript.inf.. 2023. 8. 16. 이전 1 2 3 4 5 다음
