- 2023.02.09(목) 1차 프로젝트 진행 중
참고자료 | fe Lab-[TIL] react-router의 Link와 a 태그
| seokkitdo-[React]Link&useNavigate
signup 페이지에서 '멤버 가입하기' 버튼을 누르면 login 페이지로 넘어가는 기능을 구현하려고 알아보던 도중, react-router에는 Link태그를 사용하여 화면 이동 기능을 구현할 수 있다는 것을 알게 되었다.
🧐 그렇다면 기존에 화면 이동을 구현하기 위해 썼던 a 태그와는 어떤 차이점이 있을까?
안 그래도 이전에 정일님이 Link와 a 태그의 차이점에 대해 공부해보라고 하셨는데 이번을 기회 삼아 알아보았다.
Link 태그
제품 내부 링크로 이동
브라우저의 주소만 바뀔 뿐, 페이지 자체를 새로고침하지는 않는다.
a 태그
제품 외부 링크로 이동
브라우저의 주소를 이동하여 페이지 자체를 새로고침한다.
➡️ 여기서, 새로고침 이란?
웹 페이지에서는 새로고침이 도리 경우 현재 렌더링 되어있는 컴포넌트가 모두 사라지고 새로운 컴포넌트를 렌더링하게 되면서 컴포넌트에 설정되어 있는 state 등이 모두 날아가게 됨.
즉, react의 경우 SPA로 동작하게 되는데 a태그를 사용하면 새로고침이 되면서 state도 초기화되기 때문에 필요한 정보를 제대로 표시할 수가 없어진다. 그렇기 때문에 새로고침이 필요한 경우가 아닌 이상 Link태그를 사용해야 하는 것!
Link와 a 태그의 차이에 대해 알아보았더니 이번엔 useNavigate과의 차이점도 함께 알아보라신다! 그렇담 해줘야지~
useNavigate()
페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 사용
ex) 로그인 버튼 클릭 시
- 회원가입 되어 있는 사용자 -> Main 페이지로 이동
- 회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동
💬 1차 프로젝트를 진행 중, 로그인 화면에서 회원 정보가 있는지 없는지에 따라 각기 다른 라우터로 연결시켜주는 기능을 구현해야 하는데 이럴 때 useNavigate를 사용하면 딱일 듯!
