Skip to content
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

Conversation

bomin0830
Copy link
Collaborator

@bomin0830 bomin0830 commented Jul 2, 2024

요구사항

기본

  • 변경된 api를 활용해 주세요.
  • 모달에 필요한 api 요청을 만들어 기능을 완성해 주세요.
  • api 요청에 TanStack React Query를 활용해 주세요.

주요 변경사항

  • 폴더 추가 기능 react query로 진행하였습니다
  • 회원가입, 로그인 페이지 react query로 진행하였습니다.

멘토에게

  • react query 사용 관련한 피드백 부탁드립니다.

@bomin0830 bomin0830 requested a review from devym-37 July 2, 2024 02:51
@bomin0830 bomin0830 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Jul 2, 2024
Copy link
Collaborator

@devym-37 devym-37 left a 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"],
Copy link
Collaborator

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({
Copy link
Collaborator

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() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분은 useQuery를 사용해보시면 어떨까요 ?

};

const postSigninMutaion = useMutation({
Copy link
Collaborator

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({
Copy link
Collaborator

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();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

invalidateQueries 어떤 쿼리를 무효화할지 특정해주시는게 좋습니다!

@devym-37 devym-37 merged commit 10dcdf6 into codeit-bootcamp-frontend:part3-김보민 Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다..
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants