리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

#전체

#개발자

#프론트엔드

#react router

#react router 6

#react router tutorial

#router

#react router 6 tutorial

#react router version 6

#route

#route component

#routes

#switch

#switch vs routes

#redirect

#useRedirect

#navigate

#useNavigate

00:00 해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

01:08react router 버전6에서 redirect를 구현하는 방법입니다. Redirect라는 컴포넌트 대신 Navigate라는 컴포넌트를 사용합니다. to에는 redirect할 pathname을 입력합니다.

01:39~01:52 Navigate로 redirect를 구현한 결과를 확인해봅니다. url 입력 창에 /redirect를 입력한 후 결과를 확인해보면 /about으로 바뀌어있는 것과 그에 따라 화면 내용도 <About /> 컴포넌트인 것을 확인할 수 있습니다. *05:07 구간으로 이동하기

05:07특정 조건에서만 redirect 되도록 코드를 작성하는 방법을 다루는 구간입니다. 내용: pathname '/checkout'으로 접근할 시 조건(여기서는 cartIsEmpty라는 값)에 따라 '/products'로 routing된 컴포넌트 혹은 <p>checkout</p>가 화면에 띄워지게 됩니다. *참고로 cardIsEmpty 변수는 true입니다. 어떤 역할을 하는 변수인지 더 깊게 파악할 필요는 없으니 넘어가주세요.

05:1605:07에서 설명하는 조건적 redirect가 어떻게 동작하는지 확인하는 구간입니다. 동작을 확인하는 중간에 cardIsEmpty 변수를 false로 바꿔주네요. 결과적으로 <p>checkout</p>가 화면에 나오겠죠? 조건적 redirect 구현을 어떻게 해야하는지 더 감을 잡고 싶으신 분은 아래 링크에서 짧은 코드를 확인해보세요(Get Started Upgrading Today 부분): https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f#get-started-upgrading-today

06:05~07:40 해당 구간에서 영상의 코드를 살펴보면 'see our products' 라는 버튼에 click handler로 history를 활용하는 콜백함수를 전달하고 있는 것을 확인할 수 있습니다. history를 활용하면 react router의 Link 컴포넌트처럼 pathname 전환이 가능합니다. 즉 history('/products')는 pathname이 '/products'으로 걸려있는 컴포넌트를 화면에 띄우라는 의미인 것이죠. 그런데 react router 버전5에서는 useHistory 대신 useNavigate를 사용하고 이에 따라 history라는 네이밍을 쓰지 않고 navigate라는 네이밍을 사용합니다.(네이밍은 자유) 간단한 사용에서는 history와 navigate 사용법에 차이는 없어서 navigate('/products')를 해주면 이전과 동일하게 동작하는 것을 확인하실 수 있습니다. *그런데 Link로 pathname을 전환하는 것과 navigate('/products')로 pathname을 전환하는 것에는 어떤 차이점이 있을까요? 답은 pathname 전환의 trigger에 있습니다. Link는 클릭이 발생할 때만 pathname을 전환시키지만 navigate를 활용하면 꼭 클릭이 아니더라도 pathname 전환이 가능합니다.

07:51다음 학습노트에서 nested route를 react router 버전6에서 어떻게 다루는지 확인해보겠습니다.

✔ 학습 완료

취소

작성하기