react2 [Next.js] 페이지 기반 페이지네이션 구현하기 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다- 페이지 번호를 클릭하면 해당 페이지로 이동한다- '이전', '이후' 버튼을 사용해 다른 데이터를 렌더링할 수 있다- 마지막 페이지일 경우, 이후페이지를 클릭할 수 없고 첫 페이지일 경우 이전 페이지를 클릭할 수 없다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 페이지 버튼 구현하기 - 훅 구현4. 데이터 가져오기 및 이전페이지, 이후페이지 구현하기 - 훅 구현5. 전체 코드[1. 초기 설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DCom.. 2024. 7. 4. [Next.js] Modal 구현하기 목표- 재사용성이 높은 모달을 구현한다- '모달 띄우기' 버튼을 클릭하면 화면에 모달이 뜬다- 모달 외부는 어둡게 변한다- 모달이 뜬 상태에서는 스크롤 기능을 막는다- 모달 외부를 클릭하면 모달이 사라진다- 모달에 다양한 기능을 넣는다 목차1. 기본 환경 구성2. 모달 컴포넌트 생성하기3. 화면에 모달 띄우기4. 모달에 기능 넣기5. 전체 코드 [1. 기본 환경 구성]1. 버튼 생성- 아래와 같이 모달을 띄울 버튼을 생성한다- 코드// src/app/page.tsx"use client";import React, { useState } from "react";function Home() { return ( 모달 띄우기 );}export default Ho.. 2024. 6. 25. 이전 1 다음
