[Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)

[Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)

지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도하는 버튼들은 Link로 처리했는데 hover 이벤트를 주려니 문제가 생겼다! 문제상황이렇게 Link 태그의 영역이 아니면서, 부모요소인 div 태그의 영역에 hover되면 동시에 hover 스타일 속성이 적용되지 않는 현상이 있었다. Link 태그의 width, height를 full(100%)로 설정해줘도 되지만, 경우에따라 이와 같은 구조이지만 크기는 부모와 달라야하는 상황이 있을 것 같아 좀 더 알아보았다. 해결tailwind에서 hover, focus 등의 상태를 그룹지어주기위해 group을 사용할..

  • format_list_bulleted HTML + CSS
  • · 2024. 9. 10.
  • textsms

[TanStack Query] useQuery() 옵션 - enabled, select

enabled- 쿼리(queryFn) 실행 여부를 제어- enabled: true => 기본값, 컴포넌트 렌더링 시점에 쿼리를 자동 실행- enabled: false => 쿼리가 자동으로 실행되지 않음, 아래 사용예제 참고하기 1) 컴포넌트 렌더링 시점에 바로 서버 데이터를 불러오지 않고, 특정 이벤트가 발생했을 때 받아오고싶은 경우const { data, refetch } = useQuery({ queryKey: ["todos"], queryFn: getTodos, enabled: false});return ( refetch()}>데이터 불러오기 ); 2) 순차적으로 의존적인 두개의 쿼리를 실행해야할 때- 첫번째 쿼리(getUserByEmail)의 실행 결과가 두번째 쿼리(getProject..

  • format_list_bulleted React
  • · 2024. 9. 6.
  • textsms
UX 향상 기법 - Throttling & Debouncing, lodash

UX 향상 기법 - Throttling & Debouncing, lodash

짧은 시간 연속으로 이벤트가 발생했을 때 어떻게 처리할 것인가! Throttling짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그릅화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것, 주로 무한 스크롤에서 사용 Leading Edge- 이벤트가 처음 발생할 때 핸들러가 실행- 이후 주어진 시간 동안은 이벤트가 무시됨- 사용자가 스크롤을 시작하는 첫 시점에만 API 호출이 이루어지고, 일정 시간동안 추가 호출이 무시됨 Trailing Edge- 이벤트가 마지막으로 발생한 후 주어진 시간이 지나면 핸들러가 실행- 사용자 입력 필드에 타이핑을 멈춘 후 일정 시간이 지나야 서버에 검색 요청이 전송됨 Leading & Trailing Edge- 이벤트가 처음 발생할 때와 마..

  • format_list_bulleted React
  • · 2024. 9. 6.
  • textsms
[React] Zustand

[React] Zustand

사용법설치yarn add zustand store 생성1) zustand 폴더 > bearsStore.js 생성 2) zustand의 create를 사용해 스토어 생성 (이 때 스토어는 관리할 상태에 따라 여러개가 될 수 있음)import { create } from 'zustand';const useBearStore = create((set) => { return { bears: 0, increase: function() { set(function(state) { return { bears: state.bears + 1 } }) }, // 초기화용 함수 init: function (){ set({ ..

  • format_list_bulleted React
  • · 2024. 9. 6.
  • textsms
Tanstack Query 캐시데이터의 생명주기

Tanstack Query 캐시데이터의 생명주기

Life Cycle fresh데이터를 새로 패칭할 필요가 없는 상태입니다. **staleTime**이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. **staleTime**이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.기본 staleTime 은 0으로 설정돼있음! (바로 stale 상태가 됨)active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말합니다.deleted캐시에서 제거된 쿼리 상태입니다. gcTime(cache Time) 이 지나면 쿼리..

  • format_list_bulleted React
  • · 2024. 9. 5.
  • textsms
TanStack Query

TanStack Query

서버상태 관리를 위한 라이브러리데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공이전보다 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있음 주요 기능1) 데이터 캐싱: 동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능을 향상시킴2) 자동 리페칭: 데이터가 변경되었을 때 자동으로 리페칭하여 최신상태를 유지3) 쿼리 무효화: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음  사용해보기주요 hooks1) get: useQuery2) modify: useMutation3) refresh: invalidateQueries  설치yarn add @tanstack/react-query ProviderQueryClientProvider로 서버상태의 영향권에 들어올 App ..

  • format_list_bulleted React
  • · 2024. 9. 5.
  • textsms