[TIL] 2022년 01월 14일

이번주는 Routing을 배워보는 시간을 가지게 되었다.

 

1.페이지를 이동하는 방식 => Routing

2.정적페이지와 동적 페이지 => Static-Routing / Dynamic-Routing

3.게시물을 가져오는 방법 => Apollo-Client / Query

4.API 요청 에러 try-catch 

 

라우팅 => 페이지 이동

const router = useRouter();


router.push("이동할 페이지"); -> 이동하고 싶은 주소 
// 페이지 이동하기 

router.reload();
router.replace();
router.pathname();

상세페이지가 다른 경우

const router = useRouter();


router.push("이동할 페이지"); -> 이동하고 싶은 주소 
// 페이지 이동하기 

router.reload();
router.replace();
router.pathname();

글이 100개일때는  

 

정적 라우팅 

board - 1 2 3 폴더

동적 라우팅 boards -> [aaa]

 

1번 게시글 상세
boards/1

실제
/boards/[aaa]

 

Routing 이란 ?

 

라우팅은 URL에 따라 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다.

 

리액트에서 라우팅 기능을 구현하는 것은 쉽지 않지만 React Router는 리액트에서 비교적 쉽게 라우팅이 

가능하도록 도와준다.

 

라우팅 페이지 이동 

const router = useRouter();


router.push("이동할 페이지"); -> 이동하고 싶은 주소 
// 페이지 이동하기 

router.reload();
router.replace();
router.pathname();

상세페이지가 다르다면

1번 게시글 상세페이지 
boards/1

2번 게시글 상세페이지
board/2

3번 게시글 상세페이지
board/3

글이 100개라면

정적라우팅

board - 1 2 3 폴더

동적 라우팅 boards -> [aaa]

board - 1 2 3 폴더

동적 라우팅 boards -> [aaa]