[React] useParams

✅ useParams

• 블로그의 게시글들 처럼 형식은 같지만 받아오는 데이터에 따라서 각각 다른 포스팅 페이지를 만들고 싶다면,
• 물론 각자 만들어도 되지만, 더 편하게 할 수 있다!!
  => useParams
  
  
• 먼저, 상위 컴포넌트 및 파일에서는 Route의 path 속성에서 ":작명한 임의의 이름" 형식으로 url 파라미터를 사용한다

let info = 정보데이터;
<Routes>
	<Route path = "children/:cnt" element={<Child data="info" />}></Route>
</Routes>

• 하위 컴포넌트 및 파일에서는

// import
import {useParams} from 'react-router-dom'

// return문
function Child (props){
	let params = useParams(); // <== 넘겨준 url 파라미터가 객체 형식으로 들어옴!!
	let cnt = params.cnt;
    // let {cnt} = useParams(); <= destructuring으로 바로 받아올 수도 있음
	return(
		<div>
			<h1>{ props.info[cnt] }</h1>
		</div>
	)
}

• 참고사항
  => url 파라미터는 여러개 사용 가능하고, 일반 경로랑 섞어서도 사용가능!!
  => ex) path = "/about/:id/info/:color

🔸 TypeScript 환경에서 useParams

• TypeScrip 환경이라면 한가지 추가사항이 있는데,
• useParams로 받아온 url 파라미터의 undefined 여부를 확신할 수 없다는 것
  => narrowing 필요!!

  // 전 이렇게 했어요
  // string으로 들어온 양의 정수 url 파라미터를 number로 바꿔서 사용하고자 하는 상황 가정

  function Child (props : { info : props.info데이터타입 } ) {
     let {cnt} = useParams();
     let cntNum : number;
     if( cnt && typeof cnt == "string" ){
         cntNum = parseInt(cnt);
     }else{ cntNum = 0; }

      if( cntNum > 0 ){
         return(
             < div>
                 < h1>{ props.info[cnt] }< /h1>
             < /div>
         )
     } else { return < div> 잘못된 접근입니다 < /div>