[React] 라우터의 몇 가지 문법

hook이란 유용한 기능이있는 함수인데 use~~로 씁니다.

라우터를 import해 온곳에 useNavigate와 Outlet을 같이 작성 해 봅시다.

useNavigate()

useNavigate훅은 Link와 같은 역할을 합니다.

하지만 useNavigate는 콜백함수안에 담는 형식으로 명령을 작성해야합니다.

1. useNavigate는 콜백함수 안에 바로 담을 수 없으므로 변수안에 저장해 둡니다.

2. 변수(페이지경로)를 통해 경로 이동 기능을 만듭니다.

그런데 Link가 더 간단해 보이고 직관적으로 보이기도 하는데 이건 왜 쓸까요?

Link의 경우 간단한 명령만 수행합니다. 그냥 어떤 버튼을 누르면 해당 페이지로 경로이동의 방식인데

useNavigate()같은 경우 콜백함수 안에 담아야 하기 때문에 유저의 특정 동작에도 반응이 됩니다.

2. 응답없음(404)페이지 만들기

간혹 유저쪽에서 뭘 잘못해서 경로를 잘못 입력하였다거나 할 때 띄울 수 있는 페이지 입니다.

path의 *은 설정한 경로 이외의 모든것이라고 알아두면 됩니다.

만약 store페이지에 들어가려했는데 주소창에 실수로 srore를 입력한다면

element에 적어둔 대로 응답하지 않는 페이지라고 나오는군요

배경이미지는 제가 공통레이아웃으로 쓰려고 임시로 박아둔거라 나오는 모습이네요.

3. Nested Route

Nest는 말그대로 둥지라고 이해하면 쉽습니다.

한 둥지 ( 부모 ) 안에 아기새( 자식 )가 있는 모양새입니다.

Route안에 Route를 담으면 됩니다.

제가 만든 페이지의 경우 헤더와 메인 백그라운드는 유지한 채로 아래의 내용들만 바뀌게 하고 싶어서

Nesting기법을 사용했습니다.

그런데 Nesting Route를 사용할 때 꼭 해줘야 할 것이 있습니다.

Outlet을 써줘야하는데 이 Outlet은

Nesting된 Route를 표시할 영역을 가리킵니다.

아까 서술했던 대로 헤더와 메인 백그라운드 밑에 컨텐츠가 자리해야 하니

가장 아래쪽에 Outlet을 적용 시켰습니다.

/요약

1. useNavigate()는 콜백함수 안에서 사용가능 하다. 따라서, 유저의 특정 조작에 따라 페이지가 이동하게 명령 할 수 있다.

2. path에서 * 은 지정한 페이지명 외 다른 페이지며을 가리킨다.

3. Nesting을 사용하려면 Outlet을 사용해서 어디에 Nesting된 Route가 들어갈 지 설정해 줘야 한다.

GSC4