React - Router

라우팅(Routing)?

• 라우팅은 경로에 따라 다른 화면을 보여주는 것이다. 리엑트는 단일 페이지(SPA) 형식이기 때문에 여러 개의 페이지를 보여주기 위해선 다른 페이지로의 이동이 계속해서 필요한 것이다.
• 리엑트에는 이러한 기능이 없기 때문에 라우터를 따로 설치해야 한다!
• 이러한 점에서 확실히 리엑트는 프레임워크가 아닌 라이브러리라는 것을 알 수 있다!

 

리엑터 라우터?

• 앞서 언급하였듯이 라우팅을 위해서 리엑터 라우터를 설치해주자!
• 다음 예시와 같은 명령어로 리엑터 라우터 설치가 가능하다.

예시1) 리엑트 라우터 설치 명령어

 

라우터 컴포넌트 연결

예시2) 라우터 컴포넌트

• 라우터 컴포넌트 구성은 다음과 같다. 사용되지 않은 컴포넌트는 주석처리 하였다.
• index.html에서 화면을 보여주고 있는 js파일에 컴포넌트 사용과 동일한 방법으로 <Router />을 하게되면 라우터가 가리키고 있는 최초의 페이지를 연결하게 된다.
• path="/" element={<Login />} 를 보면 알 수 있듯이 최초 페이지는 로그인 페이지이다. 
• 컴포넌트를 사용할때는 반드시 import와 export를 잊지말자!!!!

 

라우터 이동 <Link /> vs useNavigate

• 라우터 이동하는 방법에는 Link 컴포넌트와 useNavigate를 사용하는 방법 총 2가지 방법이 존재한다.
• <Link 컴포넌트 사용>
  • Link 방식을 사용할 때 컴포넌트 이기에 반드시 import를 해줘야 한다는 것을 잊지말자!
  • Link 사용 예시는 다음과 같다. <Link to="경로"></Link>

예시3) Link import 필수

예시4) Link 사용

• <a> & <Link> 차이점
  • a태그와 Link태그 모두 설정한 path로 이동하는 방법이다. 하지만 a는 외부 사이트로 이동하는 경우, Link는 프로젝트 내에서 페이지 전환하는 경우 사용된다는 것을 기억하자!

 

• <useNavigate 사용>
  • Link 방식과 마찬가지로 반드시 import 해주자!
  • 함수 호출을 통하여 페이지를 이동하는 방법이다.
  • 함수선언할 때 페이지 경로를 설정하고 useNavigate 훅을 사용한다.

예시5) useNavigate import 필수

예시6) 함수 선언

예시7) onClick 속성을 이용한 함수호출

 

• <Link /> & useNavigate 차이점
  
  • Link 방법은 클릭할 경우 바로 페이지로 이동할 때 사용된다. ex) 단순 페이지 이동
  • useNavigate는 페이지로 이동할 때 처리할 로직이 존재할 경우 사용된다. ex) 로그인 버튼 클릭 시 회원가입 확인(인증 및 인가), 데이터 전송

 

Nested Routing

• 리엑트에서는 Router로 중첩(Nesting) 라우팅을 구현할 수 있다.
• 중첩 라우팅이란 여러 개의 컴포넌트를 단계별로 정의하는 라우팅 기법이다.
• 쉽게 말해서 서브경로를 만드는 기법!

 

Nested Routing 예시

예시8) Nesting 전

• 다음 예시는 about 페이지에서 서브 경로를 만들고 있는 경우이다.

 

예시9) Nesting 사용

• 최상위 컴포넌트에 <Route></Route>로 하위 컴포넌트를 감싸준다.
• /about/member 또는 /about/location을 작성할 필요 없이 path 속성에 'member' 또는 'location'을 작성한다.
• 다음과 같은 코드만으로는 하위 컴포넌트를 어디서 보여줄 것인지 정하지 않았기 때문에 아무것도 나타나지 않는다.

 

Outlet이 필요해!

• Nesting Router를 사용하였을 경우 하위 컴포넌트를 표현하기 위해서는 어떻게 해야 할까??
• 최상위 컴포넌트에서 Outlet 속성을 하위 컴포넌트를 나타내고자 하는 위치에 다음과 같이 작성하면 된다.

예시10) Outlet

 

100개의 상세페이지를 작성하려면 100개의 코드를 작성해야 할까?

• 프로그래밍을 공부하다보면 개발자는 중복된 작업을 굉장히 지양한다.
• 따라서 당연히 100개의 코드를 작성할 필요가 없다!
• url 파라미터를 사용하자!!

예시11) url 파라미터

• 부모 컴포넌트에 /:id로 선언해주면 id값에 따라 페이지 이동이 가능하다.

예시12) url 파라미터 선언

예시13) url 파라미터 선언

• 자식 컴포넌트에서 id값을 활용하여 페이지 이동을 구현하였다.
• /detail/:id 는 /detail/아무거나 라는 뜻이다.
• 또한 /detail/:id/abc/:abc 이렇게 여러개를 작성할 수 있다.

 

When & Why use Nested Routing

• Nested Routing은 페이지에서 하나의 요소만 변경하고자 할 때 사용한다.

예시14) /about/member

예시15) about/location

• 다음 예시를 보면 '회사정보임' 아래에 '멤버입니다' 부분의 텍스트만 바뀐것을 알 수 있다. 이렇게 동일한 레이아웃 내에서 하나의 박스나 요소를 변경하고자 할 때 유용하게 사용할 수 있다. 

 

404 페이지

• 오타로 인하여 존재하지 않는 페이지를 들어간 경우 -> 존재하지 않는 페이지를 일명 404페이지라고 부른다.
• 존재하지 않는 페이지를 들어갔을 경우 또한 사용자에게 잘못된 페이지라고 보여줄 수 있다.

예시16) 404페이지

• path 속성에 *를 주었다. *는 모든것을 의미하는데 여기서 작성한 페이지 외의 모든 페이지를 의미한다.

예시17) 404 page