From 8e2bdb4b6c36f05246619af09fa901298bf0dd04 Mon Sep 17 00:00:00 2001 From: Jihoo Kim Date: Mon, 21 Aug 2023 16:15:17 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20props=EB=A1=9C=20=EB=84=98=EA=B8=B0?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=EC=97=90=20useCallback=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/Provider.tsx | 2 +- src/features/posts/queries/useGetPost.tsx | 1 - .../form/GenderSelect/GenderSelect.tsx | 2 +- .../NicknameAgeGenderForm.tsx | 81 +++++++++++-------- .../RegionJobCategoryForm.tsx | 2 +- .../vote/components/VoteButton/VoteButton.tsx | 1 - src/features/vote/components/VoteSection.tsx | 1 - .../vote/queries/useGetChoiceOptions.tsx | 1 - src/features/vote/queries/useGetMyChoice.tsx | 1 - 9 files changed, 49 insertions(+), 43 deletions(-) diff --git a/src/app/Provider.tsx b/src/app/Provider.tsx index 28151a80..3e13abd2 100644 --- a/src/app/Provider.tsx +++ b/src/app/Provider.tsx @@ -18,7 +18,7 @@ export function Provider({ children }: { children: React.ReactNode }) { {children} - {/**/} + ); } diff --git a/src/features/posts/queries/useGetPost.tsx b/src/features/posts/queries/useGetPost.tsx index 01d419ab..f8b545ee 100644 --- a/src/features/posts/queries/useGetPost.tsx +++ b/src/features/posts/queries/useGetPost.tsx @@ -1,5 +1,4 @@ import { useQuery } from '@tanstack/react-query'; -import { isNumber } from 'lodash'; import { axiosInstance } from '@/common/libs/axios'; import { GetPostResponse } from './dto/get-post'; diff --git a/src/features/register/components/form/GenderSelect/GenderSelect.tsx b/src/features/register/components/form/GenderSelect/GenderSelect.tsx index 3f4aabb2..a7040dfc 100644 --- a/src/features/register/components/form/GenderSelect/GenderSelect.tsx +++ b/src/features/register/components/form/GenderSelect/GenderSelect.tsx @@ -17,7 +17,7 @@ export function GenderSelect({ defaultValue, onChange }: GenderSelectProps) { if (gender) { onChange(gender); } - }, [gender]); + }, [gender, onChange]); return (
diff --git a/src/features/user/components/NicknameAgeGenderForm/NicknameAgeGenderForm.tsx b/src/features/user/components/NicknameAgeGenderForm/NicknameAgeGenderForm.tsx index 2f7d0457..cb642e56 100644 --- a/src/features/user/components/NicknameAgeGenderForm/NicknameAgeGenderForm.tsx +++ b/src/features/user/components/NicknameAgeGenderForm/NicknameAgeGenderForm.tsx @@ -1,5 +1,5 @@ import { AxiosError } from 'axios'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { axiosInstance } from '@/common/libs/axios'; import { parseDateString } from '@/common/utils/date/parseDateString'; import { validateBirthDate } from '@/common/utils/validations/birth-date'; @@ -45,29 +45,35 @@ export function NicknameAgeGenderForm({ birthDate: null, }); - const handleNicknameChange = async (nickname: string) => { - setIsDirty({ ...isDirty, nickname: true }); - setFormData({ ...formData, nickname }); + const handleNicknameChange = useCallback( + async (nickname: string) => { + setIsDirty((prevIsDirty) => ({ ...prevIsDirty, nickname: true })); + setFormData((prevFormData) => ({ ...prevFormData, nickname })); - let error = validateNickname(nickname); - if (!error) { - try { - await axiosInstance.get(`/user/${user?.id}/validate-nickname`, { - params: { nickname }, - }); - } catch (e) { - if (e instanceof AxiosError && e.response?.status === 400) { - const errorCode = e.response.data.errorCode; - if (errorCode === 'IS_DUPLICATED_NICKNAME') { - error = '이미 존재하는 닉네임입니다.'; - } else if (errorCode === 'IS_BAD_WORD') { - error = '금칙어 입력이 불가합니다.'; + let error = validateNickname(nickname); + if (!error) { + try { + await axiosInstance.get(`/user/${user?.id}/validate-nickname`, { + params: { nickname }, + }); + } catch (e) { + if (e instanceof AxiosError && e.response?.status === 400) { + const errorCode = e.response.data.errorCode; + if (errorCode === 'IS_DUPLICATED_NICKNAME') { + error = '이미 존재하는 닉네임입니다.'; + } else if (errorCode === 'IS_BAD_WORD') { + error = '금칙어 입력이 불가합니다.'; + } } } } - } - setErrorMessage({ ...errorMessage, nickname: error }); - }; + setErrorMessage((prevErrorMessage) => ({ + ...prevErrorMessage, + nickname: error, + })); + }, + [user?.id], + ); const nicknameSuccessMessage = isDirty.nickname && !errorMessage.nickname @@ -76,21 +82,26 @@ export function NicknameAgeGenderForm({ const birthDateSuccessMessage = isDirty.birthDate && !errorMessage.birthDate ? ' ' : null; - const handleBirthDateChange = ({ year, month, day }: BirthDate) => { - setIsDirty({ ...isDirty, birthDate: true }); - setFormData({ ...formData, birthDate: `${year}-${month}-${day}` }); - - setErrorMessage({ - ...errorMessage, - birthDate: isDirty.birthDate - ? validateBirthDate({ year, month, day }) - : null, - }); - }; + const handleBirthDateChange = useCallback( + ({ year, month, day }: BirthDate) => { + setIsDirty((prevIsDirty) => ({ ...prevIsDirty, birthDate: true })); + setFormData((prevFormData) => ({ + ...prevFormData, + birthDate: `${year}-${month}-${day}`, + })); + setErrorMessage((prevErrorMessage) => ({ + ...prevErrorMessage, + birthDate: isDirty.birthDate + ? validateBirthDate({ year, month, day }) + : null, + })); + }, + [isDirty.birthDate], + ); - const handleGenderChange = (gender: Gender) => { - setFormData({ ...formData, gender }); - }; + const handleGenderChange = useCallback((gender: Gender) => { + setFormData((prevFormData) => ({ ...prevFormData, gender })); + }, []); useEffect(() => { const isValid = Boolean( @@ -101,7 +112,7 @@ export function NicknameAgeGenderForm({ !errorMessage.birthDate, ); onChange(formData, isValid); - }, [formData, errorMessage]); + }, [formData, errorMessage, onChange]); return (
diff --git a/src/features/user/components/RegionJobCategoryForm/RegionJobCategoryForm.tsx b/src/features/user/components/RegionJobCategoryForm/RegionJobCategoryForm.tsx index e73a7e56..37d6702b 100644 --- a/src/features/user/components/RegionJobCategoryForm/RegionJobCategoryForm.tsx +++ b/src/features/user/components/RegionJobCategoryForm/RegionJobCategoryForm.tsx @@ -74,7 +74,7 @@ export function RegionJobCategoryForm({ ); onChange(formData, isValid); - }, [formData, jobErrorMessage, isDirty]); + }, [formData, jobErrorMessage, isDirty, onChange]); useEffect(() => { if (formData.job) { diff --git a/src/features/vote/components/VoteButton/VoteButton.tsx b/src/features/vote/components/VoteButton/VoteButton.tsx index f9221405..db391ce8 100644 --- a/src/features/vote/components/VoteButton/VoteButton.tsx +++ b/src/features/vote/components/VoteButton/VoteButton.tsx @@ -1,5 +1,4 @@ import { useAtom, useSetAtom } from 'jotai'; -import { useEffect } from 'react'; import { FloatingButton } from '@/common/components/ui/buttons'; import { useUser } from '@/features/user/queries'; import { useChooseOption } from '@/features/vote/queries'; diff --git a/src/features/vote/components/VoteSection.tsx b/src/features/vote/components/VoteSection.tsx index 4b1cb9aa..10a2581d 100644 --- a/src/features/vote/components/VoteSection.tsx +++ b/src/features/vote/components/VoteSection.tsx @@ -1,5 +1,4 @@ import { useAtomValue, useSetAtom } from 'jotai'; -import { useAtom } from 'jotai/index'; import { useEffect } from 'react'; import { Spacing } from '@/common/components/ui'; import { getRemainingTime } from '@/features/posts/utils/get-remaining-time'; diff --git a/src/features/vote/queries/useGetChoiceOptions.tsx b/src/features/vote/queries/useGetChoiceOptions.tsx index 91179450..0dfa4554 100644 --- a/src/features/vote/queries/useGetChoiceOptions.tsx +++ b/src/features/vote/queries/useGetChoiceOptions.tsx @@ -1,5 +1,4 @@ import { useSuspenseQuery } from '@suspensive/react-query'; -import { useQuery } from '@tanstack/react-query'; import { axiosInstance } from '@/common/libs/axios'; import { GetChoiceOptionsResponse } from './dto/get-choice-options'; diff --git a/src/features/vote/queries/useGetMyChoice.tsx b/src/features/vote/queries/useGetMyChoice.tsx index 0ca414ed..e90e1c37 100644 --- a/src/features/vote/queries/useGetMyChoice.tsx +++ b/src/features/vote/queries/useGetMyChoice.tsx @@ -1,5 +1,4 @@ import { useQuery } from '@tanstack/react-query'; -import { isNumber } from 'lodash'; import { axiosInstance } from '@/common/libs/axios'; import { GetMyChoiceResponse } from './dto/get-my-choice';