Next.js 심화 5일 차 @병합 트러블 슈팅

오늘은 어제 얼추 마무리한 프로젝트를 최종 병합한 것을 붙들고 트러블 슈팅을 한 후에 배포를 했다. 

 

여태껏 테스트가 충분하지 않아서 부족함을 느꼈던 부분이 이번에 확실히 드러났는데, 마이페이지에서 새로고침을 하면 zustand에서 받아오는 userId가 빈 문자열 ' ' 이 되었다가 제대로된 userId 'dfasofiasoeijfwoeif'로 받아와지는 현상이 있었다. 이로 인해

userId로 불러와지는 post 데이터들이 리렌더링을 해주지 않으면 반드시 보이지 않는 상태

가 되어버렸다. 

 

이를 해결하기 위해서 나는 처음에

zustand에서 초기값 설정을 잘 해주면 

userId가 빈 문자열 ' ' 이 되었다가 제대로된 userId 'dfasofiasoeijfwoeif'로 받아와지는 현상

 

이 일어나지 않을 것이라고 생각했다. 

 

하지만 zustand 설정이 너무 어려운데다가 아무리 관련 글을 찾아서 시도해봐도 위 현상을 해결할 수 없었다. 

 

그래서 결국 튜터님을 찾아가보게 되었는데, 튜터님은 이건 Next.js에서 zustand를 쓰려면 어쩔 수 없는 현상이기 때문에 zustand를 손볼 수는 없을 것 같다고 하셨다. 대신 게시글을 불러오는

Tanstack Query 쪽에서 userId에 따라 자동적으로 리렌더링을 일으키도록 하는 방법을 알려주셨다. 

 

Tanstack Query에는 enabled라는 속성이 있는데 이에 boolean 값을 주면 값에 따라 쿼리가 자동적으로 실행되는 것을 막을 수 있다고 한다. 

 

이를 userId가 빈 문자열 ' ' 이 되었다가 제대로된 userId 'dfasofiasoeijfwoeif'로 받아와지는 현상에 적용하면

 

userId가 빈 문자열 ' ' 일 경우에는                       !!userId = false

userId가 제대로된 'difoasdfiodifsdf'일 경우에는  !!userId = true

가 되는 것이다. 

 

즉 userId가 안 들어올 경우에 포스트 데이터가 받아와지는 것을 방지할 수 있으니 화면에는 항상 내가 원하는 값만 나오도록 하는 게 가능해진다. 

 

아래는 문제를 해결한 코드이다. 기존의 코드에서 enabled:!!userId 만 추가했을 뿐인데 오류가 해결된 것이다.

  const { data, isLoading } = useQuery({
    queryKey: ["myLikes"],
    queryFn: async () => {
      const response = await getMyLikePosts(userId);
      return response;
    },
    enabled: !!userId
  });

 

 

라이브러리를 사용하지 않고 모든 기능을 구현할 수 있는 게 내 역량을 키우는 측면에서는 가장 좋겠지만 이렇게 마법같이 문제가 해결되는 모습을 보면 너무나 든든할 따름이다.