전체 글

onCompleted 내부에서 Apollo Client의 client.refetchQueries 메서드를 사용하여 쿼리를 수동으로 리패치하기

onCompleted 함수에서 쿼리를 다시 실행하여 데이터를 리패치하기// 기존 refetchconst [createDishMutation, { loading }] = useMutation(CREATE_DISH_MUTATION, { refetchQueries: [ { query: MY_RESTAURANT_QUERY, variables: { input: { id: +restaurantId, }, }, }, ],});refetchQueries는 useMutation의 옵션으로 제공되는 기능이다.onCompleted는 mutation이 성공적으로 실행된 후 호출되는 콜백 함수이다.  onCompleted 내부에서 Apollo C..

[Rect Hook Form] 기본적으로 버튼이 submit 버튼으로 동작, 별도의 버튼 사용시 타입 지정 꼭 해주기

태그 안에 태그를 사용하면, 기본적으로 버튼은 submit 버튼 역할을 한다.즉, 버튼을 클릭하면 onClick 이벤트가 실행되고, form 제출 동작도 함께 발생하며 onSubmit 이벤트가 실행된다.  기본 동작 안에 있는 은 기본적으로 type="submit" 속성을 가진다.사용자가 이 버튼을 클릭하면, 브라우저는 form의 데이터를 제출하고 onSubmit 이벤트를 발생시킨다. 동시에, 버튼의 onClick 이벤트가 실행된다.  왜 onSubmit이 실행되는가? 기본 동작버튼을 클릭하면 type="submit"에 의해 폼이 제출되며 onSubmit 이벤트가 발생한다.onClick과 onSubmit의 실행 순서버튼 클릭 시 먼저 onClick 이벤트가 실행되고, 그 후에 onSubmit 이벤트가 ..

함수를 호출하는 방식 (즉시 호출과 지연 호출)

즉시 호출 onClick={onDeleteClick(uuid)}이 방식에서는 함수 호출이 즉시 실행된다.컴포넌트가 렌더링될 때 onDeleteClick(uuid)가 바로 실행되며, 그 결과로 반환되는 값이 onClick에 전달된다.클릭 이벤트가 발생하기 전에 즉시 실행된다.함수가 바로 실행되어 값이 반환되기 때문에, 이벤트 리스너로 적절하지 않다.이 방식은 onDeleteClick이 함수가 아닌 그 반환 값을 사용하게 되므로, 의도된 동작이 아닐 수 있다.  지연 호출: onClick={() => onDeleteClick(uuid)}onClick 이벤트가 발생할 때 onDeleteClick(uuid) 함수가 지연 호출된다.클릭 이벤트가 발생할 때만 onDeleteClick(uuid)가 실행된다.클릭 이벤..

[Rect Hook Form] getValues()에서 Number 타입 가져오는 법

import { useForm } from "react-hook-form";interface IFormProps { name: string; price: string; // getValues()로 가져오는 값의 타입은 기본적으로 문자열(string) description: string;}const MyForm = () => { const { register, getValues, formState: { isValid, errors }, handleSubmit } = useForm({ mode: "onChange", }); const onSubmit = (data: IFormProps) => { const { name, price, description } = g..