[React] 드래그 가능한 사이즈 조절 컴포넌트 구현

useState와 이벤트 리스너를 활용한 커서 기반 사이즈 조절 기능 구현함 import { useEffect, useState } from 'react';import './App.css';import LeftContent from './components/LeftContent';import RightContent from './components/RightContent';import './index.css';import { checkPrimeSync } from 'crypto';import { AnySoaRecord } from 'dns';function App() { const [width, setWidth] = useState(200); const [isDragging, setIsDrag..

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

페이지네이션

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 /..

• format_list_bulleted React
• · 2024. 8. 12.
• textsms

리액트 폴더구조 : 재귀적으로 컴포넌트 구조

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..

• format_list_bulleted React
• · 2024. 7. 28.
• textsms

리액트 : Redux-toolkit 다크모드 (with. Tailwindcss)

✅구현 (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 { ..

• format_list_bulleted React
• · 2024. 3. 24.
• textsms

리액트 : 반응형 사이드 바 (햄버거 메뉴 🍔 )

[핵심] (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..

• format_list_bulleted React
• · 2024. 1. 2.
• textsms

React : 리액트 쿼리 LifeCycle (+ isLoading, isFetching)

★ 제천 튜터님: 리액트쿼리의 찐 동작원리 ★ 1. 리액트 쿼리 리액트 쿼리 : 서버 상태관리를 쉽게 도와주는 라이브러리 ▼ ▼ 서버상태 : 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들 (1) fetching : 서버에서 데이터 받아오기 (2) caching : 서버에서 받아온 데이터를 따로 보관 => 동일한 데이터가 단 시간 내에 다시 필요하면 서버 요청 없이 보관된 데이터 꺼내서 사용 (3) synchronizing : 서버상 데이터와 보관 중인 캐시 데이터를 동일하게 만들기 (동기화) (4) updating : 서버 데이터 변경 용이 => mutation & invalidateQueries 리액트 쿼리 미사용 : useState + useEffect 사용 const [todos, setTo..

• format_list_bulleted React
• · 2023. 12. 21.
• textsms