웹 공부일지

React 배너 슬라이더 만들기 + touch evnet 기능 설정한 INTERVAL 마다 다음 화면으로 넘어감 touch event를 구현하여 오른쪽이나 왼쪽으로 밀 때 마다, 화면이 넘어감 코드 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; const dummyBannerList = ['tomato', 'violet', 'skyblue', 'teal', 'orange']; const INVERVAL = 2500; const Banner = () => { const divRef = useRef(null); const [start..

useDefferedValue 개념 및 사용법 useDeferredValue는 UI 일부의 업데이트를 지연시킬 수 있는 React 훅입니다. 컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져옵니다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); // query: 지연시키려는 값입니다. 어떤 타입이든 가질 수 있습니다. // defferdQuery : 초기 렌더링 중에는, 반환된 ‘지연된 값’은 사용자가 제공한 값과 동일합니다. // 업데이트가 발생하면 React는 먼저 이전 값으로 리렌더링을 시도(반환값..

useTransition 개념 및 사용법 useTransition은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다. useTransition은 정확히 두 개의 항목이 있는 배열을 반환합니다: 보류 중인 트랜지션이 있는지 여부를 알려주는 isPending 플래그 state 업데이트를 트랜지션으로 표시할 수 있는 [startTransition 함수] (아무것도 return 하지 않음) 사용법 function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransiti..

RTK Query 캐쉬 무효화 상황 A라는 사람의 데이터를 불러온 다음, 로그아웃 한 뒤, B라는 사람으로 로그인 했지만, rtk query의 캐싱 기능에 의해 A의 데이터가 지워지지 않고 A의 데이터로 렌더링된다. 새로고침이나 refetch 등을 사용하면 데이터를 제대로 가져오긴하지만 처음 렌더링 했을 때, 제대로된 데이터를 가져오게 하기 위해 로그아웃시 지정해 놓은 태그의 캐시를 무효화 시킨다. 해결 로그아웃시, 해당 태크를 이용하여 캐싱을 무효화한다. customerApi export const customerApi= createApi({ reducerPath: 'customerApi', baseQuery: fetchBaseQuery({ baseUrl: ``, prepareHeaders: (head..