[React] 리액트 라우터 2: navigate, nested routes, outlet

 

react-router-dom 의 useNavigate 기능과

nested routes와 함께 쓰는 기능인 outlet 을 알아보자!

 

---

 

 

useNavigate => hook 의 일종입니다.

hook 이란 ? 유용한 기능을 가지고 있는 함수같은것들

navigate를 선언할 때

 

페이지 이동을 할때 쓸수 있다.

 

어 그러면 Link 랑 무슨차이지?

Link 는 a 태그같은 느낌으로 생성되어서 클릭시 밑줄이 생긴다던지 등의 차이가 있다.

 

naviagate는 어떠한 이벤트핸들러 등과 함께 함수에 넣어서 사용이 가능하다.

 

일단 navigate라는 이름으로 선언한 변수에 useNavigate()  를 담아주고

쓰고자 하는 어떠한 버튼에 

onClick 함수를 넣어 이동할 곳의 주소를 naviagate() 소괄호에 넣어주면 된다.

 

useNavigate 로 선언한 navigate() 소괄호에 숫자를 넣으면 앞뒤로 이동가능.

 

이렇게 설정하고 이 버튼을 누르면 앞으로 이동!(우리가 평소에 아는 인터넷 뒤로 가면 생기는 앞으로 이동)

이건 뒤로 이동이다.

 

-2 를 적으면 뒤로 두칸을 가고 0을 적으면 같은 페이지에서 무한 로딩? 느낌으로 계속 동작한다.

 

 

---

 

 

404 페이지 만들기!

path 에다가 " * " 을 넣으면 우리가 설정한 이외의 주소로 가게 되면 모두 이 페이지로 이동하게 된다.

 

 

---

Nested Routes

 

회사 정보를 알려주는 페이지를 만든다고 하자

about 은 회사 정보

about 에서 member 에 들어가면 회사원 정보

about 에서 location 에 들어가면 회사 위치 정보

 

이렇게 주소를 설정할 수 있지만

 

여기서 Nested Routes를 사용하면 더 효율적이다.

about 기준으로 member와 location 으로 들어가려고 한다면.

 

about 이라는 router를 바로 닫는게 아니라 route 들을 그 사이에 포함시킨다!

/about Route 안에 member 와 location 이 있다.

 

이렇게 만들면 장점 1 route 작성이 좀 더 간단해 진다.

 

두번째 장점!!

nested routes를 통해 해당 페이지에 접근하게 되면

path /about 과 member에 들어있는 값(element)를 모두 보여줄 수 있다!!!

 

이것을 보여주기 위해서는 상위 route 의 return 값에 위치를 정하고

 

사이에 들어있는 routes의 element 값을 표시해 주고 싶은 곳에

Outlet 을 넣어주면 된다.(상위 return에 하위 element 를 넣고싶은곳!)

 

Outlet 을 넣은 위치에 해당 하위 Route의 element 가 출력되는것을 확인할 수 있다.

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/