전체 글 (62) 썸네일형 리스트형 [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] useCallback은 무엇일까? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다. 즉, 함수가 정의되고, 리랜더링이 일어나고 의존성 배열이 바뀌지 않는다면 함수는 새로 만들어지지 않고 기존의 함수가 반환됩니다. 사용법 import { useCallback } from 'react'; function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // ... - 리렌더링 사이에 캐시할 함수, 함.. [js 알고리즘] 백준 9009: 피보나치 문제 피보나치 수 ƒK는 ƒK = ƒK-1 + ƒK-2로 정의되며 초기값은 ƒ0 = 0과 ƒ1 = 1 이다. 양의 정수는 하나 혹은 그 이상의 서로 다른 피보나치 수들의 합으로 나타낼 수 있다는 사실은 잘 알려져 있다. 하나의 양의 정수에 대한 피보나치 수들의 합은 여러 가지 형태가 있다. 예를 들어 정수 100은 ƒ4 + ƒ6 + ƒ11 = 3 + 8 + 89 또는 ƒ1 + ƒ3 + ƒ6 + ƒ11 = 1 + 2 + 8 + 89, 또는 ƒ4 + ƒ6 + ƒ9 + ƒ10 = 3 + 8 + 34 + 55 등으로 나타낼 수 있다. 이 문제는 하나의 양의 정수를 최소 개수의 서로 다른 피보나치 수들의 합으로 나타내는 것이다. 하나의 양의 정수가 주어질 때, 피보나치 수들의 합이 주어진 정수와 같게 되는 최소 .. [React] useEffect()를 제거해보자! effect를 제거했을 때 이점 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 오류 발생 가능성이 줄어든다. 불필요한 Effect를 제거하는 방법 1. 렌더링을 위해 데이터를 변환하는 경우 - 렌더링 과정: React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산한다 -> 화면 업데이트 -> Effect 실행 - Effect를 이용하여 state를 즉시 업데이트 한다면, 전체 프로세스가 처음부터 다시 시작된다. - 즉, 불필요한 렌더링이 발생한다. - 해결법: 데이터 변환을 컴포넌트 최상위 레벨에서 진행하면, props나 state가 변경될 때 해당 코드가 다시 실행된다. 2. 사용자 이벤트를 처리하는 경우 - 이벤트 핸들러를 제작할 경우 어떤 일이 일어나는지 정확하게 알 수 있지만.. [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.. [JS 알고리즘] 병합 정렬이란? 병합 정렬이란? - 병합 정렬의 경우에는 분할 정복 알고리즘을 사용하고 있다. - 분할 정복은 더 이상 쪼갤 수없는 크기가 될 때까지 분할해야하기 때문에 재귀함수로 구현해야한다. - 단점: 재귀함수를 사용하게 되면 함수 호출이 많이 발생되며, 오버헤드가 발생한다. 즉, 메모리를 많이 사용하게 된다. - 장점: 시간 복잡도 O(NlogN)을 보장하는 빠른 정렬 알고리즘이다. 분할 정복이란? 1. 분할(divide): 큰 문제를 작은 부분 문제(쉬운 문제)로 분할한다. 2. 정복(conquer): 작은 부분 문제를 각각 해결한다. 3. 조합(combine): 해결한 부분 문제의 답을 이용하여 다시 큰 문제를 해결한다. 병합 정렬 동작 방식 => 각 부분 배열은 이미 정렬된 상태로 보며, 각 부분 배열의 첫번.. 이전 1 2 3 4 5 6 7 8 다음 목록 더보기
