React5 [5] 페이지 이동 & 모달 [1] 페이지 이동 componentserverData.prev가 있으면 이전 페이지로 이동, pageNumList를 가운데에 배치, serverData.nex로 다음 페이지 이동import React from 'react'function PageComponent ({ serverData, movePage }) { return ( {serverData.prev ? ( movePage({ page: serverData.prevPage })} > Prev ) : ( )} {serverData.pageNumList.map(pageNum => ( movePage({ page: pag.. 2025. 3. 7. [4] customHook [1] useCustomHook이라는 훅 생성import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';const getNum = (param, defaultValue)=>{ if(!param){ return defaultValue } return parseInt(param)}const useCustomMove = () => { const navigate = useNavigate() const [queryParams] = useSearchParams() const page = getNum(queryParams.get('page'),1) const size = getNum(queryParams.ge.. 2025. 3. 6. [3] useParams와 useNavigate [1] params에 대해todo/read/13으로 url 하고 Test Modify라는 글자를 누르면moveToModify로 이동해서 링크 /todo/modify/숫자 로 나온다. [2] url의 useParams()와 useSearchParams() 1) params: url 경로 변수ex) http://localhost:3000/todo/read/12?page=3&size=20 에서 12가 param 값이다.const {tno} = useParams(); console.log(tno);에서 useParams를 사용하면 url에서 /todo/read/:tno 부분의 값을 가져올 수 있음 2) searchParams: 쿼리 스트링, ? 이후의 값ex) http://localhost:3000/todo/r.. 2025. 3. 6. [2] 공동 Layout 동작 [1] Layout 적용하기위에를 보면 {children}으로 적용되어 있고 안에 있는 내용이 props.children으로 전달됨import React from 'react';import BasicLayout from '../layouts/BasicLayout';function MainPage(props){ return( Main Page );}export default MainPage;이고 하단처럼 설정해주면 localhost:3000/about하면 Main Page 글씨가 About Page 글씨로 바뀐다.[2] 상단의 바를 누르면 페이지 전환하기 위에 BasicMenu를 정의해주고이렇게 로 header 대신에 삽입해준다. 2025. 3. 6. 이전 1 2 다음
