본문 바로가기

트러블 슈팅/React

 (8)
[React] 중복 클릭 방지 구현하기 문제 발생컴퓨터로 웹을 실행하게 되면 기록 및 피드를 등록할때 빠르게 등록이 되지만 모바일 같이 느린 데이터를 사용하는 기기는 지금 등록중인지 아닌지를 확인하기가 어려워서 사용자가 중복으로 클릭한다는 문제점이 발생하였다. 해결우선 react-query를 사용하고 있기때문에, react- query의 isLoading을 사용하기로 했다. 등록 중일 때(Loading)는 유저가 화면을 누를 수 없도록 dimmed처리를 하고, Spinner를 보여주며, 등록 버튼도 비활성화되게 설정하였다.export const NewFeed = () => { const { mutate, isLoading } = useNewFeedMutation(); return ( ... ..
[React] useInfiniteQuery로 페이지네이션 적용하고 난 후 데이터 깜빡임 현상 페이지네이션 적용하고 난 후 Cache된 데이터가 보이는 현상처음에는 removeQueries key값 하나만 주고, 댓글을 삭제하면 Cache된 곳에서 대댓글을 다 삭제하게 로직을 재구성했었다.곰곰히 생각해보니, 상관없는 Cache된 데이터도 삭제해버리니, 정작 react-query의 이점을 제대로 못 적용하고 있다고 생각이 들었고, 다른 기록의 댓글을 클릭하니깐 약간 깜빡임처럼 기존의 댓글이 보이는 현상을 확인 할 수 있었다.    해결 방안id값을 key값으로 인자를 더 넣어주어서 해당 id만 Cache된 데이터만 삭제하게 해주었다. 그리고 invalidateQueies를 적용하여 대댓글을 다시 불러오게 설정을 해주었다.const useNewCommentDeleteMutation = ({ recor..
[React-Query] react-query useInfiniteQuery를 이용해서 페이지네이션 개선하기 현 사항전에 팀원분이 페이지네이션 hook을 구현해 놓으셨는데, setState와 useEffect를 이용해서 구현을 해놓으셨다. 굳이 2가지의 요소를 사용하지 않아도 react-query의 useInfinteQuery를 이용해서 페이지네이션을 구현할 수 있다고 생각이 들어서, 다시 재제작을 해보았다. 구현 코드처음에는 조건문을 사용하지 않고, 아래처럼 구현을 했었는데 처음에는 0을 불러왔는데, 버튼을 클릭하니 페이지 2를 불러오는 문제점이 발생했다. lastPage.last?undefined:allPages.length + 1그래서 api 조건을 살펴보았는데, 우리쪽 백에서 page=0부터 시작하게 설정을 해놓아서, 아래처럼 조건문을 설정해놓았다! const useFeedInfiniteQuery = (..
[React] useInfiniteQuery page별로 받아오는 데이터 병합하기 현 사항지금 더 보기를 누르면 페이지를 불러오는 식으로, 페이지네이션을 구현하였는데, 같이 함께 했던 팀원이 따로 페이지네이션이라는 hook을 만들어서 setState와 useEffect를 이용하여 구현을 해 놓은 상태였습니다.하지만, react-query를 사용하고 있는 상황에서 이 페이지네이션 hook보다는 react-query의 useInfiniteQuery를 이용하여 개선을 하는게 좋다고 생각이 들어서 모든 페이지를 적용하고 있는데, 각 페이지마다 상황이 다르니깐 여러가지 문제가 생기게 되어서 정리를 하게 되었습니다. 문제 사항우선, 저의 경우에는 데이터가 오면 날짜 별로 데이터를 Grouping을 하였는데, useInfiniteQuery를 이용하다보니, 페이지가 서로 다르면 페이지 별로 날짜가 ..
[React] useCallback을 왜 제거할까? 문제 발생 - 사용자를 초대한 상태인데 똑같은 사용자를 초대했을 때 어떤 식으로 작동할까라는 예외사항을 만들어보았다. 역시나, 초대된 사용자를 X버튼을 눌러서 초대를 취소했을 때, 똑같은 사용자가 표시 된다. - 또, 닉네임을 입력하게 되면 입력된 만큼 query에 cache되는 모습을 확인 할 수 있다. 해결 방법- 초대 버튼을 누르면 무조건 refetch()가 되기 떄문에, 초대자에 해당 닉네임이 없을 때만 refetch()가 될 수 있게 조건 문을 설정하였다. 맨 처음에는 useCallback으로 감싸져 있어서, contributors, inputValue를 업데이트가 안되어서 계속 오류가 났었는데, useCallback을 감싼 로직을 삭제했다. - 그런데, useCallback을 사용해도 cont..
[react-query] 실행 시점 enabled, refetch를 이용하고, cache된 데이터 삭제 문제 발생- 닉네임을 입력하고, 초대를 누르고 해당 닉네임이 있다면 닉네임이 나옵니다. 처음에 똑같은 닉네임을 검색했다면, 초대 버튼을 누르지 않아도 리스트에 닉네임이 표시되는 문제점이 발생하였습니다.    - 로직에서 enabled를 이용하여 초대 버튼을 클릭시 enabeld가 true가 되며, useEffect를 이용하여 데이터가 변경되면 enabled가 false가 되게 처리하였습니다. 하지만 useEffect를 제거하고 로직을 개선의 필요성을 느꼈습니다.//enabled를 이용한 기존 코드const useGetUser = ({ q, enabled }: { q: string, enabled: boolean }): UseQueryResult => { return useQuery([USER_API_K..
[React-Query] 대댓글 기능 중 댓글 삭제 시 해당 대댓글 다시 불러오는 현상 해결 주요 기능지금 현재하는 프로젝트에서 댓글을 수정, 삭제, 답글을 달 수 있는 기능이 있다. 주요 기능을 설명하자면,1. 댓글 등록 기능2. 등록된 댓글 수정, 삭제, 대댓글 등록 가능3. 대댓글 등록 시 수정, 삭제 기능 4. 각 기능 별로 바뀌는 탭 바 문제 사항이런 식으로 구현이 되는데, 댓글 조회, 수정, 삭제, 등록, 상태별 바뀌는 탭 바는 최상위 부모 컴포넌트에서 제작을 하였다.  그래서 컴포넌트의 구조가 Comment->CommentList->CommentItem->ReplyCommentList->ReplyCommentItme 으로 구성이 되어 있는데,댓글 조회:Commnet, 대댓글 조회:ReplyCommentList로 불러온다. 이때 댓글을 조회,수정,삭제는 상단에서 관리해서 수월했지만, ..
[React+Typescript]key of type of (icons)의 string 오류 문제 발생기존에 여러 icon svg를 사용하기 위해서 Icon 컴포넌트를 제작하였다.import { colorStyles } from '@/styles/color';import icons from '@/assets/index';import { ReactElement } from 'react';interface IconProps { iconType: keyof typeof icons; width?: number; height?: number; fill?: string; onClick?: () => void | undefined;}export const Icon = ({ iconType = 'alarm', width = 16, height = width, fill = colorStyles...

티스토리툴바