springBoot_개념_Day_19

ㅡㅡㅡ

 

#

●1

 

#

 

#

 

#page는 ”URL을 처리”할려고 만들었습니다.

#

컴포넌트 폴더안에서 “실제적인 작업”을 처리할려고 합니다.

#

 

#

●2

140번 2번실행

#호출되는 원리

 

#결과 : http://localhost:3000/todo/read/140 이것을 치면, 중복코드에 대한 부분을 작성해주어야합니다.

 

#리엑트 라우터 돔

커스텀훅 : 네비게이션 

유즈서치 파람스 = 리엑트라우터돔안에 들어가는 훅입니다.

그런 훅들을 처리하려합니다.

네비게이션 : 이동

유즈서치파람스 훅 : 

커스텀훅 : 시작을 use

 

Modify 변경

커스텀훅으로 만들어놧습니다.

 

그래서 수정 삭제 읽기 공통적으로 만들어놧습니다. use훅으로 사용자정의 훅으로 만들어놨습니다.

#

 

import { useState } from "react"

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 [refresh, setRefresh] = useState(false)  

 

  const [queryParams] = useSearchParams()

 

  const page = getNum(queryParams.get('page'), 1)

  const size = getNum(queryParams.get('size'),10)

 

  const queryDefault = createSearchParams({page, size}).toString()

 

 

 

 

 

 

  const moveToList = (pageParam) => {

 

    let queryStr = ""

 

    if(pageParam){

 

      const pageNum = getNum(pageParam.page, 1)

      const sizeNum = getNum(pageParam.size, 10)

 

      queryStr = createSearchParams({page:pageNum, size: sizeNum}).toString()

    }else {

      queryStr = queryDefault

    }

 

    navigate({

      pathname: `../list`,

      search:queryStr

    })

 

    setRefresh(!refresh) //추가

  }

 

 

 

 

 

  const moveToModify = (num) => {

 

    console.log(queryDefault)

 

    navigate({

      pathname: `../modify/${num}`,

      search: queryDefault  

    })

  }

 

 

 

 

 

 

  const moveToRead =(num) => {

 

    console.log(queryDefault)

 

    navigate({

      pathname: `../read/${num}`,

      search: queryDefault

    })

  }

 

 

 

 

 

  return  {moveToList, moveToModify, moveToRead, page, size, refresh}

 

 

 

}

 

export default useCustomMove