[26.02.03] React 재직자 교육 7 - Routing 라우팅

useRouter 훅으로 router를 얻는다

router.push("경로");  => 이벤트에 의한 이동

 

원래 리액트는 CSR이다.

next가 들어감으로서 SSR의 개념이 생겼다.

 

페이지 이동은 "use client"

클라이언트 컴포넌트만 가능하다

서버 컴포넌트는 불가능 하다

 

"use client"

import { useRouter } from "next/navigation";

function ClientComponentB() {
  const router = useRouter();

  return (
    <div className="card">
      <div className="card-header">
        ClientComponentB
      </div>
      <div className="card-body">
        <button className="btn btn-info" onClick={() => router.back()}>뒤로 가기</button>
      </div>
    </div>
  );
}

export default ClientComponentB;

 

useRouter를 사용해서 라우터.백 으로 뒤로가기함

 

 

useSearchParams 함수는 비동기라 시간이 좀 오래 걸릴 수 있다.

지연이 발생해서 Suspense를 사용하면 좋다.

 

queryString.get("key1");으로 쿼리 스트링 가져온다.

 

폴더 구조를 잘 만들어야된다.

component폴더 안에

[ ] 대괄호로 넣어줌..

마지막 [ ]폴더에 page.js를 만들어 준다.

seg2밑에 page.js가 있다.

 

 

 

 클라이언트컴포넌트일경우

"use client"
import { useParams } from "next/navigation";
export default function ComponentA() {
const params = useParams();
const seg1 = params.seg1;
const seg2 = params.seg2;
return (
<div className="card">
<div className="card-header">
ComponentA
</div>
<div className="card-body">
<div>seg1: {seg1}</div>
<div>seg2: {seg2}</div>
</div>
</div>
);
}

 

  서버컴포넌트일경우

– 정적 내보기를 할 경우에는 반드시 서버 컴포넌트로 작성해야 함

– generateStaticParams() 함수 정의 필수

– 정적내보내기방법: Ch09 참조

import { use } from "react";
export default function ComponentA({params}) {
// params가 Promise로 변경되었기 때문에 직접 접근하지 말고 먼저 unwrap해야됨
// use() 함수 이용
const { seg1, seg2 } = use(params);
return (
<div className="card">
<div className="card-header">
ComponentA
</div>
<div className="card-body">
<div>seg1: {seg1}</div>
<div>seg2: {seg2}</div>
</div>
</div>
);
}
export async function generateStaticParams() {
// PathVariables가 가질 수 있는 모든 경우의 값을 리턴해야함
// 정적 내보내기를 하면 data2.html, data3.html과 같이 정적 파일로 생성됨
return [
{ seg1: 'data1', seg2: 'data2'},
{ seg1: 'data1', seg2: 'data3'},
// 모든 정적 경로를 여기에 추가해야함
];
}

서버컴포넌트가 디폴트이다.

그러면 리액트로부터 use를 임포트 하고 ({params})를 넣어준다...

 

csr은 가급적 pathVariable쓰지마세요....