const ProductsList = () => { const [currentPage, setCurrentPage] = useState(1); const {data: products, isLoading, isError} = useQuery('products', ProductsList); const handlePageChange = newPage => { setCurrentPage(newPage); }; return ( );}; const Pagination = ({currentPage, itemsPerPage, totalItems, onPageChange}) => { const totalPage = Math.ceil(totalItems /..
01. 데이터 구조const folderData = [ { id: 1, name: "Root Folder", children: [ { id: 2, name: "Sub Folder 1", children: [ { id: 3, name: "File 1" }, { id: 4, name: "File 2" } ] }, { id: 5, name: "Sub Folder 2", children: [ { id: 6, name: "File 3" } ] } ] }]; 02. 재귀 컴포넌트 구조import React f..
✅구현 (1) 리덕스 툴킷 상태관리 (2) 다크모드 구현시, HTML최상위 요소에 'dark'클래스 추가 (요소에 추가) document.documentElement.classList.add('dark'); (3) Tailwindcss로 다크모드 적용 (1) 리덕스 툴킷 //redux > module > darkModeSlice.tsx import { createSlice } from '@reduxjs/toolkit'; const darkModeSlice = createSlice({ name: 'darkMode', initialState: false, reducers: { toggleDarkMode(state) { return (state = !state); }, }, }); export const { ..
[핵심] (1) input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id' (2) 🍔 햄버거 모양 : span으로 만들기 * 3개 (3) 토글되면 햄버거 => x 모양으로 변경되며 사이드바 사용 (1) 🍔 햄버거 모양 구현 : input 태그 + label 태그 [NavBar.jsx] : return 문 안의 ui구현 { navigate('/top'); }} > TOP { navigate('/bottom'); }} > Bottom { navigate('/acc'); }} > Accessories { navigate('/hit'); }} > HIT ▶ input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id..
★ 제천 튜터님: 리액트쿼리의 찐 동작원리 ★ 1. 리액트 쿼리 리액트 쿼리 : 서버 상태관리를 쉽게 도와주는 라이브러리 ▼ ▼ 서버상태 : 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들 (1) fetching : 서버에서 데이터 받아오기 (2) caching : 서버에서 받아온 데이터를 따로 보관 => 동일한 데이터가 단 시간 내에 다시 필요하면 서버 요청 없이 보관된 데이터 꺼내서 사용 (3) synchronizing : 서버상 데이터와 보관 중인 캐시 데이터를 동일하게 만들기 (동기화) (4) updating : 서버 데이터 변경 용이 => mutation & invalidateQueries 리액트 쿼리 미사용 : useState + useEffect 사용 const [todos, setTo..
React Query 1. 기존 미들웨어의 한계 (Redux-Thunk) 보완 : 보일러 플레이트 => 코드량이 너무 많음 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님 2. 강점 : 사용 방법이 쉽고 직관적임 : 보일러 플레이트 만들다가 오류 날 일이 없음 3. 주요 키워드 3가지 (1) Query : 데이터 물어보기 : axios의 get요청과 유사 (2) Mutation : 어떤 데이터 변경 : CRUD 중 CUD에 해당 : axios의 post,patch,delete와 유사 (3) Query Invalidation (★) : 위에서 본 쿼리를 인벨리데이션한다 = 무효화 시킨다. : 저녁 8시의 데이터와 저녁 9시의 데이터는 일치하지 않음 => 무효화시키고 => 9시의 데이터를 ..