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 ( );..

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

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

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

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