뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, React Router 6 Tutorial #3 - Redirects & useNavigate
서원석님의 학습노트

리액트 라우터 버전 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에서 어떻게 다루는지 확인해보겠습니다.
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기