-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[김보민] Week19 #498
The head ref may contain hidden characters: "part4-\uAE40\uBCF4\uBBFC-week19"
[김보민] Week19 #498
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다!
react-query 부분에서 기본적으로는 잘 사용해주신 것 같습니다.
리뷰 남겨드린 것처럼 queryKey 중복을 막을 방법, invalidation하실 때 특정 쿼리키만 무효화할 수 있도록 해주시면 좋을 것 같습니다!
고생하셨습니다!
setAllLinks(AllLinks.data.folder); | ||
} | ||
|
||
const { data: FoldersData } = useQuery({ | ||
queryKey: ["Folders"], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
query키는 추후에 많아 질 수 있고, 프로젝트상 겹칠 수 있는 여지가 있어서, 따로 queryKey를 관리하실 수 있으면 좋을 것 같습니다. 그렇게 될 경우 프로젝트 전반의 모든 queryKey가 있기에 중복을 피할 수 있습니다
setAllLinks(AllLinks.data.folder); | ||
} | ||
|
||
const { data: FoldersData } = useQuery({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
현재는 하나의 useQuery만 사용하셔서 컴포넌트 내부에 있지만, 저는 해당 부분도 따로 커스텀 훅으로 분리하여 사용하는 편입니다. 추후에 로직 등의 처리를 위해 select옵션 등을 사용하시게 된다면 그 부분을 고려해주셔도 좋을 것 같습니다!
const router = useRouter(); | ||
const { folderId } = router.query; | ||
|
||
async function fetchData() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분은 useQuery를 사용해보시면 어떨까요 ?
}; | ||
|
||
const postSigninMutaion = useMutation({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useMutation 선언은 useState와 비슷하게 컴포넌트 선언내부 상단에서 해주시면 좋을 것 같습니다.
use로 시작하는 hook의 경우 상단에서 모아져 있는 것이 좋습니다
}; | ||
|
||
const postSignUpMutaion = useMutation({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분도 위와 동일합니다!
|
||
const toggleHandler = () => { | ||
setIsOpen(!isOpen); | ||
}; | ||
|
||
const handleAddFolder = () => { | ||
postFolderMutation.mutate(inputValue); | ||
queryClient.invalidateQueries(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
invalidateQueries 어떤 쿼리를 무효화할지 특정해주시는게 좋습니다!
요구사항
기본
주요 변경사항
멘토에게