728x90

reactrouter사용법 2

React와 Node.js 방명록 개발(9): 삭제 기능과 페이징 구현

삭제 기능과 페이징 구현내용 요약 및 학습 목표삭제 기능 구현상세보기 페이지에서 삭제 버튼을 통해 글을 삭제하는 기능 추가삭제 요청 후 목록 페이지로 이동하는 흐름 학습페이징 기능 구현글 목록에 페이지 번호 추가 및 페이지 전환 기능 구현백엔드 API에서 페이징 처리 설정React Query를 사용해 페이지 데이터 패칭 및 페이지 전환 기능 구현실습 세부 내용1. 삭제 기능 구현: 글 상세보기에서 삭제 버튼 추가삭제 요청 구현: Axios를 사용해 백엔드에 삭제 요청을 보내고, 성공 시 목록 페이지로 이동합니다.// PostDetail.jsimport React from 'react';import { useParams, Link } from 'react-router-dom';import { useQuer..

React 2024.11.02

React와 Node.js 방명록 개발(8): 상세보기 및 수정 페이지 구현

상세보기 및 수정 페이지 구현내용 요약 및 학습 목표상세보기 페이지 구현특정 글의 내용을 확인하는 상세보기 페이지 구현글의 작성 내용, 작성자명, 작성 시간 등을 표시React Query를 통해 특정 글의 데이터를 API로부터 가져오기글 수정 페이지 구현글 수정 페이지에서 기존 내용을 수정할 수 있도록 구현작성 내용, 작성자명 등 기존 데이터를 폼에 채워서 수정 가능수정 후 저장/취소 버튼으로 데이터 반영 및 페이지 이동 설정React Router로 페이지 라우팅 설정React Router를 사용해 상세보기와 수정 페이지로 이동각 페이지 간의 데이터 연동 설정하여 UX 개선실습 세부 내용상세보기 페이지 구현: 글 내용, 작성자, 작성시간 표시데이터 패칭: React Query를 사용해 특정 글의 데이터를..

React 2024.11.02
728x90