[React] Chart.js

[React] Chart.js

1. ContentLayout.tsximport LeftContent from '../LeftContent';import RightContent from '../RightContent';function ContentLayout() { return ( );}export default ContentLayout;  2. RightContent.tsximport React from 'react';import Chart from './chart/Chart';function RightContent() { return ( );..

  • format_list_bulleted React
  • · 2025. 1. 1.
  • textsms

[React] Filter + React-hook-form

1.TabContents.tsximport { useLocation, useNavigate } from 'react-router-dom';import BreadCrumb from './BreadCrumb';import { useRecoilState } from 'recoil';import { selectedDataAtom } from './store/selectedData';import Filter from './components/filter/Filter';import { useState } from 'react';function TabContents() { const [selectedData, setSelectedData] = useRecoilState(selectedDataAtom); c..

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

React : BreadCrumb + Tab

00. BreadCrumb.tsximport { useLocation, Link } from 'react-router-dom';function BreadCrumb() { const location = useLocation(); const { pathname, search } = location; const pathSegments = pathname.split('/').filter((segment) => segment); const searchSegments = search .replace('?', '') .split('&') .filter((segment) => segment); return ( ..

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

[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