[김유경] Week20 #1069

codingaring · 2024-05-10T02:26:35Z

요구사항

기본

주요 변경사항

모달 리팩토링, 리팩토링
react-query 사용
data -> 어떤 data인지 구분 가능하도록 변경

멘토에게

useContext와 react-query를 사용하다, 아래와 같은 오류를 만났고 useEffect의 dependency list로 useQuery에서 받아온 데이터를 넣어주고 있어서 1초마다 리렌더링 되는 것 같습니다. 하지만...어떻게 해결해야하는지 떠오르지 않습니다....ㅠㅠ
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

useEffect의 dependency에 data를 추가하여 해결

vercel · 2024-05-10T02:26:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
4-weekly-mission	❌ Failed (Inspect)			May 12, 2024 6:52am
4-weekly-mission-ursd	❌ Failed (Inspect)			May 12, 2024 6:52am

codingaring · 2024-05-12T06:37:42Z

components/common/NavigationBar/NavigationBar.tsx

  const { handleUserDataState } = useContext(UserContext);
-  const router = useRouter();
-  const [profile, setProfile] = useState({
-    auth_id: "",
-    email: "",
-    image_source: "",
-  });
  const Location = useRouter();
  const LocationPath = Location.pathname;
+  const { data: profile } = useQuery({
+    queryKey: ["loginUserProfile"],
+    queryFn: getLoginUserInfo,
+  });

-  async function handleLoadUserInfo() {
-    try {
-      const { data } = await getLoginUserInfo();
-      const { email, image_source, auth_id } = data[0] || [];
-      setProfile({
-        auth_id: auth_id,
-        email: email,
-        image_source: image_source,
-      });
-      handleUserDataState({ userId: auth_id });
-    } catch (error) {
-      router.push("/signin");
+  useEffect(() => {
+    if (profile) {
+      handleUserDataState({ isLogin: true, userId: profile.id });
    }


useQuery로 받아오는 데이터가 1초마다 계속해서 받아오다보니, useContext의 데이터도 계속해서 새로 받아지는 것 같습니다. 무한 렌더링...이 되고 있는 것 같은데 이런 경우에 useQuery말고 그냥 fetch 함수를 사용하는 것이 방법일지, useQuery 말고도 다르게 개선할 수 있는지 궁금합니다 ...!

음.. 1초마다 계속해서 요청을 한다는 말씀이실까요?!?

제가 확인해보니 위 이유보다는 useEffect의 의존성 배열에 handleUserDataState가 있는게 문제인거 같아요! 함수의 경우는 매 렌더링 시 새롭게 생성되어 참조값이 변하기 때문에 무한 루프에 빠지게 되는 원인이 될 수 있어요! 그래서 일반적으로는 함수에 직접 의존하는 순수한 값만 넣어주는게 좋아요!

해당 의존성 배열에서 handleUserDataState를 제거하면 문제가 사라집니다!

codingaring · 2024-05-12T06:41:59Z

components/common/Modals/ModalElements/ModalDim.ts

-export const ModalDim = styled.div`
+export const ModalDim = styled.button`


넘겨주는 함수의 매개변수 타입이 event : MouseEvent라서 태그를 버튼으로 바꿨는데, 그것보단 타입을 ButtonElement 말고 HTMLElement 로 바꾸는게 더 적절한 지 여쭤보려고 했으나 적으면서 생각해보니 그게 더 적절한 것 같습니다.

codingaring · 2024-05-12T06:54:01Z

components/home/LandingHeader/LandingHeader.tsx

+  const router = useRouter();
+  const { loginData } = useContext(UserContext);
+
+  const handleGoFolders = () => {
+    if (loginData.isLogin) {
+      router.push("/folder");
+    } else {
+      router.push("/signin");
+    }
+  };
+


위의 useContext 무한 렌더링 때문인지, 이 부분이 정상적으로 작동하지 않습니다. url은 바뀌지만 리다이렉트 되지 않는 문제가 있습니다.

이건 앞서 말한 useEffect의 의존성에서 handleUserDataState를 제거하면 해결될 거 같아요~!

SeolJaeHyeok

20주차 미션 고생 많으셨습니다 유경님🎉
고민의 흔적이 코드에서 보이는거 같아서 개인적으로 좋은 경험이었어요! ㅎㅎ 고생하셨습니다:)

질문에 대한 답변은 코드 리뷰 내에 작성했으니 확인해주시면 됩니다!

SeolJaeHyeok · 2024-05-15T09:22:20Z

components/common/Modals/AddToFolder/AddToFolder.tsx

+  const [selectFolderId, setSelectFolderId] = useState<number>();
+  const addToFolderMutation = useMutation({
+    mutationFn: ({ url, folderId }: { url: string; folderId: number }) =>
+      postAddToFolder({ url: url, folderId: folderId }),


중요하지는 않은 부분이지만 postAddToFolder({url, folderId}) 로 축약할 수 있을거 같아요!

SeolJaeHyeok · 2024-05-15T09:23:19Z

components/common/Modals/ModalProp.ts

+export interface DeleteLinkProps extends BaseModalProps {
  deleteURL: string;
+  linkId: number;
 }


기본 공통 속성 상속 받아서 처리하는거 좋네요👍👍

SeolJaeHyeok · 2024-05-15T09:24:21Z

components/common/NavigationBar/NavigationBar.tsx

+  const { data: profile } = useQuery({
+    queryKey: ["loginUserProfile"],
+    queryFn: getLoginUserInfo,
+  });


useQuery에 대해서는 멘토링 시간에 따로 이야기드리도록 하겠습니다!

SeolJaeHyeok · 2024-05-15T09:31:17Z

components/common/NavigationBar/NavigationBar.tsx

  const { handleUserDataState } = useContext(UserContext);
-  const router = useRouter();
-  const [profile, setProfile] = useState({
-    auth_id: "",
-    email: "",
-    image_source: "",
-  });
  const Location = useRouter();
  const LocationPath = Location.pathname;
+  const { data: profile } = useQuery({
+    queryKey: ["loginUserProfile"],
+    queryFn: getLoginUserInfo,
+  });

-  async function handleLoadUserInfo() {
-    try {
-      const { data } = await getLoginUserInfo();
-      const { email, image_source, auth_id } = data[0] || [];
-      setProfile({
-        auth_id: auth_id,
-        email: email,
-        image_source: image_source,
-      });
-      handleUserDataState({ userId: auth_id });
-    } catch (error) {
-      router.push("/signin");
+  useEffect(() => {
+    if (profile) {
+      handleUserDataState({ isLogin: true, userId: profile.id });
    }


음.. 1초마다 계속해서 요청을 한다는 말씀이실까요?!?

제가 확인해보니 위 이유보다는 useEffect의 의존성 배열에 handleUserDataState가 있는게 문제인거 같아요! 함수의 경우는 매 렌더링 시 새롭게 생성되어 참조값이 변하기 때문에 무한 루프에 빠지게 되는 원인이 될 수 있어요! 그래서 일반적으로는 함수에 직접 의존하는 순수한 값만 넣어주는게 좋아요!

해당 의존성 배열에서 handleUserDataState를 제거하면 문제가 사라집니다!

SeolJaeHyeok · 2024-05-15T09:34:21Z

hooks/usePortalContents.ts

+
+  function toggleContents(event: MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    setIsOpenContents(!isOpenContents);


state를 업데이트할 때는 함수형 업데이트를 사용하는게 보다 안전한 방식입니다!

SeolJaeHyeok · 2024-05-15T09:44:24Z

components/folder/FolderContent/FolderContent.tsx

+          <Button onClick={handleCategoryActive} id={null} value="전체">
            전체
          </Button>


id에 null을 넣어주신 특별한 이유가 있으실까요?!?

SeolJaeHyeok · 2024-05-15T09:48:44Z

components/home/LandingHeader/LandingHeader.tsx

+  const router = useRouter();
+  const { loginData } = useContext(UserContext);
+
+  const handleGoFolders = () => {
+    if (loginData.isLogin) {
+      router.push("/folder");
+    } else {
+      router.push("/signin");
+    }
+  };
+


이건 앞서 말한 useEffect의 의존성에서 handleUserDataState를 제거하면 해결될 거 같아요~!

SeolJaeHyeok · 2024-05-15T09:49:41Z

context/UserContext.ts

-    userId: "",
+    userId: 0,


0으로 초기값을 넣어주신 이유가 있으실까용?
초기값이 없다면 null을 넣어주는게 좋아보여요!

SeolJaeHyeok · 2024-05-15T09:51:06Z

data-access/axios/deleteFolder.ts

+import { axiosInstance } from "./axiosInstance";
+
+export async function deleteFolder({
+  folderId,
+}: {
+  folderId: number | string;
+}) {
+  const response = await axiosInstance.delete(
+    `/linkbrary/v1/folders/${folderId}`
+  );
+
+  return response.status;
+}


지금은 API Error에 대한 별도의 처리가 없는거 같아요!
axios intercepter를 보게 되면 에러가 발생했을 때, Promise.reject(error) 처리를 하고 있는데 이 에러를 처리하는 부분이 따로 안보이는거 같네용?

useMutation을 사용하시면 onError 콜백을 사용해서 에러를 처리할 수 있습니다!

++
추가적으로 API를 관리하는 방식에 대해서 드리고 싶은 말이 있는데, 이 부분은 멘토링 때 이야기 하도록 할게요!

SeolJaeHyeok · 2024-05-15T09:56:56Z

util/handleToken.ts

+const ACCESS_TOKEN = "accessToken";
+const REFRESH_TOKEN = "refreshToken";
+
+export const setToken = (accessToken: string, refreshToken: string) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(ACCESS_TOKEN, accessToken);
+    localStorage.setItem(REFRESH_TOKEN, refreshToken);
+  }
+};
+
+export const getToken = () => {
+  if (typeof window !== "undefined") {
+    const accessToken = localStorage.getItem(ACCESS_TOKEN);
+    const refreshToken = localStorage.getItem(REFRESH_TOKEN);
+
+    return { accessToken, refreshToken };
+  }
+};
+
+export const removeToken = () => {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(ACCESS_TOKEN);
+    localStorage.removeItem(REFRESH_TOKEN);
+  }
+};


토큰 관련 로직 하나의 파일로 관리하는거 좋네요!

codingaring added 17 commits May 9, 2024 14:39

🔥 Delete : delete unnecessary files

dc12647

✨ Faet : add handleToken function

14eb7b6

♻️ Refactor : refactor getCategory function

a50c45d

🚚 Rename : data -> folderInfo

f8fbe8b

✨ Feat : install react-query

31491e5

✨ Feat : use react-query

511db2a

✏️ Fix : 페이지 첫 로드시, 카테고리 목록이 안뜨던 문제 해결

5cd40de

useEffect의 dependency에 data를 추가하여 해결

🚚 Rename : AddFolderContent -> AddFolder

ca8145c

✨ feat : add customhook : useModal

44cebb4

♻️ Refactor : modal change AddToFolderModal

386a2e2

💄 UI : modify addToFolder Button text 삭제하기 -> 추가하기

8248ffb

♻️ Refactor : completed Modal Refactor

39b93fb

🐛 Fix : disabled kebab button in folder page

bee3b7e

♻️ Refactor : changeModal Button

ab543d3

💄 style : extends PrimaryButton to AddToFolderButton

10950ac

✨ Feat : posible rename Modal

c5a0a45

✨ Feat : createFolder

35f7adc

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 10, 2024 02:27 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission May 10, 2024 02:27 Failure

codingaring requested a review from SeolJaeHyeok May 10, 2024 02:27

codingaring added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성 죄송합니다.. labels May 10, 2024

codingaring self-assigned this May 10, 2024

codingaring changed the title ~~[Week20 ]김유경~~ [김유경] Week20 May 10, 2024

✨ Feat : add postAddToFolder

f5c866d

vercel bot had a problem deploying to Preview – 4-weekly-mission May 10, 2024 05:33 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 10, 2024 05:33 Failure

codingaring added 2 commits May 10, 2024 14:38

🐛Fix : 폴더 데이터가 안불러와지던 문제 해결

345513f

🐛 Fix : 링크 목록이 보이지 않던 문제 해결

fc2cb45

✨ Feat : add function deleteFolder Modal

40d9659

vercel bot had a problem deploying to Preview – 4-weekly-mission May 11, 2024 12:45 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 11, 2024 12:45 Failure

✨ Feat : deleteLink

43b5bf7

vercel bot had a problem deploying to Preview – 4-weekly-mission May 11, 2024 13:20 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 11, 2024 13:20 Failure

codingaring added 4 commits May 12, 2024 13:45

♻️ Refactor : change signin api url and modify handleToken

7e17707

♻️ Refactor : modify change api url : checkSignin

64c61be

♻️ Refactor : change signup api url

b4a2da1

♻️ Refactor : change currentUserProfile api url

d99735f

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 12, 2024 05:38 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission May 12, 2024 05:38 Failure

codingaring marked this pull request as ready for review May 12, 2024 05:52

codingaring removed the 미완성 죄송합니다.. label May 12, 2024

💚 Build : resolved build error

8f92b5d

vercel bot had a problem deploying to Preview – 4-weekly-mission May 12, 2024 05:54 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 12, 2024 05:54 Failure

♻️ Refactor : modify landing header button event

e1c5d03

vercel bot had a problem deploying to Preview – 4-weekly-mission May 12, 2024 06:31 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 12, 2024 06:32 Failure

♻️ Refactor : change fetch -> mutation

fd3e932

vercel bot had a problem deploying to Preview – 4-weekly-mission May 12, 2024 06:46 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 12, 2024 06:47 Failure

♻️ Refactor : change modal event type

a230069

vercel bot had a problem deploying to Preview – 4-weekly-mission May 12, 2024 06:52 Failure

vercel bot had a problem deploying to Preview – 4-weekly-mission-ursd May 12, 2024 06:52 Failure

codingaring commented May 12, 2024

View reviewed changes

SeolJaeHyeok reviewed May 15, 2024

View reviewed changes

SeolJaeHyeok merged commit cf45e50 into codeit-bootcamp-frontend:part3-김유경 May 20, 2024
1 of 3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김유경] Week20 #1069

[김유경] Week20 #1069

codingaring commented May 10, 2024 •

edited

Loading

vercel bot commented May 10, 2024 •

edited

Loading

codingaring May 12, 2024

SeolJaeHyeok May 15, 2024

codingaring May 12, 2024

codingaring May 12, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok left a comment

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

SeolJaeHyeok May 15, 2024

		export const ModalDim = styled.div`
		export const ModalDim = styled.button`

[김유경] Week20 #1069

[김유경] Week20 #1069

Conversation

codingaring commented May 10, 2024 • edited Loading

요구사항

기본

주요 변경사항

멘토에게

vercel bot commented May 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeolJaeHyeok left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codingaring commented May 10, 2024 •

edited

Loading

vercel bot commented May 10, 2024 •

edited

Loading