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.

Sign up for GitHub

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

Jump to bottom

React Query 설치 및 팀소서 이슈 부분에 적용 #199

Merged
merged 9 commits into from
Feb 27, 2022
Merged

React Query 설치 및 팀소서 이슈 부분에 적용 #199

merged 9 commits into from
Feb 27, 2022

Conversation

SeojinSeojin
Copy link
Member

⛓ Related Issues

📋 작업 내용

  • 팀소서 이슈 리팩토링
  • 팀소서 이슈 받아오는 부분에 React Query 적용

📌 PR Point

충격적인 사실..

useMutation을 안 해도 데이터가 알아서 패칭된다는 사실..
그래도 써보려고 했는데 코드가 더 복잡해져서 관뒀습니다 ㅜ
혹시 쓰고 성공한 사례가 있다면 알려주세요..

React Query를 쓰는 방법

사용X

  useEffect(() => {
    (async () => {
      if (teamID === undefined) return;
      const teamDetailData = await api.teamService.getTeamInfo(Number(teamID));
      setTeamInfoData(teamDetailData);
    })();
  }, []);

사용O

  const { data: teamInfoData } = useQuery(['teamDetailData', teamID], () =>
    api.teamService.getTeamInfo(Number(teamID)),
  );

그 외 리팩토링한 부분

  • api로 추상화되지 않았던 요청 분리하기
  • 타입 뎁쓰 줄이기
export type TeamInfoData = {
  teamDetailData: {
    teamDetail: TeamDetail;
    teamMemberCount: number;
    teamMemberList: TeamMemberNoneId[];
  };
};
export type TeamInfoData = {
  teamDetail: TeamDetail;
  teamMemberCount: number;
  teamMemberList: TeamMemberNoneId[];
}

왜 했느냐? => 점을 줄이기 위하여

🔬 Reference

@SeojinSeojin SeojinSeojin added fix ☔️ 에러 고치기 refactor 🪐 리팩토링 labels Feb 24, 2022
@SeojinSeojin SeojinSeojin self-assigned this Feb 24, 2022
@SeojinSeojin
Copy link
Member Author

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

100Gyeon
100Gyeon reviewed Feb 25, 2022
View reviewed changes
Copy link
Member

@100Gyeon 100Gyeon left a comment

Choose a reason for hiding this comment

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

드디어 리액트 쿼리 적용🥳 수고했어 서진아 !!

src/infrastructure/api/types/team.ts
Comment on lines 77 to 81
export type TeamInfoData = {
teamDetailData: {
teamDetail: TeamDetail;
teamMemberCount: number;
teamMemberList: TeamMemberNoneId[];
};
teamDetail: TeamDetail;
teamMemberCount: number;
teamMemberList: TeamMemberNoneId[];
};
Copy link
Member

Choose a reason for hiding this comment

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

이런 것도 리팩토링 해주고 진짜 꼼꼼하다 !! depth 줄일 수 있었는데 내가 왜 이렇게 했지 ㅋㅋㅋㅋ 고마워 👍👍

src/infrastructure/remote/team.ts Outdated
.catch((error) => {
console.error(error.response);
});
console.log(response);
Copy link
Member

@100Gyeon 100Gyeon Feb 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

console.log(response);는 지워주세요 ~~!

Copy link
Member Author

Choose a reason for hiding this comment

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

고마우이~!!

src/presentation/pages/Team/Issue/NewIssue/index.tsx
Comment on lines 21 to 23
function TeamNewIssue() {
const navigate = useNavigate();
const { teamID } = useParams();
Copy link
Member

Choose a reason for hiding this comment

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

여기에도 똑같이 if (teamID === undefined) navigate('/'); 필요한가?
src/presentation/pages/Team/Main/index.tsx에서는 추가했길래 !!

Copy link
Member Author

Choose a reason for hiding this comment

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

완전 꼼꼼하게 봐줬구나.. 감사합니둥!!
추가해둘게~!

src/presentation/pages/Team/Main/index.tsx
Comment on lines -32 to +34
useEffect(() => {
if (teamID === undefined) return;
if (!isChecked) {
(async () => {
const { issueList } = await api.teamService.getTeamIssue(teamID);
setIssueList(issueList);
})();
} else {
(async () => {
const { issueList } = await api.teamService.getMyIssue(teamID);
setIssueList(issueList);
})();
}
}, [isChecked]);
const { data: teamIssueList } = useQuery(
['teamIssueList', teamID],
() => api.teamService.getTeamIssue(teamID ?? ''),
{ enabled: !isChecked },
);
const { data: myIssueList } = useQuery(
['myIssueList', teamID],
() => api.teamService.getMyIssue(teamID ?? ''),
{ enabled: isChecked },
);
Copy link
Member

Choose a reason for hiding this comment

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

우와 이렇게 비교하니까 리액트 쿼리 진짜 좋다..

Copy link
Member Author

Choose a reason for hiding this comment

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

그치... 먼가 박박 간단해졌어..
그리고 cleanup 함수(useEffect의 return문 안에 쓰는거!) 안 해줘도 그 에러가 안 뜨더라구.... 박박..... 우리 열심히 했는데...

Copy link
Member

Choose a reason for hiding this comment

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

ㅋㅋㅋㅋ 그래도 좋은 경험이었다구 생각! 박박 수고했다😻

@SeojinSeojin
Copy link
Member Author

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

@SeojinSeojin
Copy link
Member Author

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

NamJwong
NamJwong approved these changes Feb 27, 2022
View reviewed changes
Copy link
Member

@NamJwong NamJwong left a comment

Choose a reason for hiding this comment

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

리팩토링까지 세세하게 잘 해주셨네염 !!!! 리액트 쿼리 적용하는 부분 잘 참고하겠읍니다 ㅎ,ㅎ

@SeojinSeojin SeojinSeojin merged commit 56fc2e3 into dev Feb 27, 2022
@SeojinSeojin SeojinSeojin deleted the feat/#198 branch February 27, 2022 05:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@NamJwong NamJwong NamJwong approved these changes

@100Gyeon 100Gyeon 100Gyeon approved these changes

@Hyoin-Kim Hyoin-Kim Awaiting requested review from Hyoin-Kim

Assignees

@SeojinSeojin SeojinSeojin

Labels
fix ☔️ 에러 고치기 refactor 🪐 리팩토링
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

React Query 도입하고 팀소서 이슈 기능 리팩토링
3 participants
@SeojinSeojin @100Gyeon @NamJwong