4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
코트첨부하겠습니다 ..!
import { useState, useEffect } from "react"; import Pagination from "../Pagination"; import styles from "../css/List.module.css"; import { Link, Navigate, useNavigate, useParams } from "react-router-dom"; import { useDispatch } from "react-redux"; import Category from "../component/Category"; import axios from "axios"; import Footer from "../component/Footer"; import ScrollTop from "../component/ScrollTop";function Tech(props) { const { id } = useParams();const [posts, setPosts] = useState([]); //데이터 받아오는 함수
const [limit, setLimit] = useState(4); const [page, setPage] = useState(1); const offset = (page - 1) * limit;
useEffect(() => { axios .get( "https://raw.githubusercontent.com/mdab4793/shop/main/Tech/Tech.json" ) .then((result) => { setPosts(result.data); }); }, []); function LowPrice() { //가격낮은순 함수 let low = [...posts]; low = low.sort((a, b) => a.price - b.price); setPosts(low); console.log(posts.sort()); }function HighPrice() { //가격높은순 함수 let high = [...posts]; high = high.sort((a, b) => b.price - a.price); setPosts(high); console.log(posts.sort()); }return ( <body className={styles.container}> <button //가격낮은순으로 정렬 onClick={() => { LowPrice(); }} > LowPrice </button>{" "} <button //가격높은순으로 정렬 onClick={() => { HighPrice(); }} > HighPrice </button> <main className={styles.main}> {posts.slice(offset, offset + limit).map(({ id }) => { return ( <section className={styles.section} key={id}> <div className={styles.wrapper}> <Link to={`/techdetail/${id}`}></Link> <h3>{posts[id]?.title}</h3> <div> <p>${posts[id]?.price}</p> </div> </div> </section> ); })}
</main>{" "} <ScrollTop /> <div> <Pagination total={posts.length} limit={limit} page={page} setPage={setPage} /> </div> <footer className={styles.footer}> <Footer /> </footer> </body> ); }export default Tech;
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.