브라우저 이동
- 브라우저를 이동하는 방법에는 여러가지가 있다 개발 환경에따라 혹은 어떤 라이브러리를 사용하냐에 따라 달라질수있고 필자본인은 React 위주의 개발을 하고있기 때문에 React 위주로 설명할 예정
useNavigate
- React Route Dom의 내장함수이다
- 단순이동 시키는 Link와 햇갈릴수 있는데 useNavigate는 특정한 이벤트가 실행되었을때 동작하도록 하거나 추가적인 로직이 필요할 경우에 사용되는 경우가 많다
사용법
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
- useNavigate를 import해온다
- navigate에 useNavigate함수를 변수에 할당한다
- 매개변수로 첫번째 인자는 이동시킬 페이지의 주소나 -1을 넣어서 페이지 히스토리의 뒤로가기버튼과 같은 동작을 시킬 수도 있음
- 매개변수로 두번째 인자는 option이고 다양한 설정 옵션을 제공하고 있어서 세부적인 제어를 할수있게 해줌
두번째 매개변수의 세부기능들
- replace: 기본값은 false고 true로 설정하게 되면 navigate대신 replace를 동작함
- 탐색하는 스택에서 현재페이지를 제거하고 새페이지로 교체하게됨
- state: navigate로 이동할때 state 매개변수에 전달할 객체를 설정할 수 있음
- 이 객체는 새 페이지로 전달되서 페이지가 이동할때 상태 정보를 전달 할 수 있음
- replaceIf: 이 옵션은 두개의 값을 가지는데 첫번째 값은 조건, 두번째 값은 navigate나 replace의 여부
- 조건이 true면 replace를 실행하고 false면 navigate를 실행함
Link
- 이 컴포넌트는 HTML의
<a>
태그와 비슷하지만 클라이언트 사이드 라우팅을 구현하는데 사용됨
- Link를 사용하면 유저가 클릭하거나 탭을하는 이벤트가 발생되었을때 페이지를 다시 로드하지 않고도 React Router가 URL을 업데이트하고 새 페이지를 렌더링 하게됨
사용법
import { Link } from "react-router-dom";
const Component => () => {
return(
<>
<Link to="/hello"> hello페이지로 이동합니다 </Link>
</>
}
- to는 이동하고자 하는 URL을 지정하고 유저가 클릭하면 React-Route-Dom이 브라우저 주소표시줄의 URL을 업데이트 하고
/hello
경로로 이동함
HTML a
- 하이퍼링크를 나타낼수있는 태그임
- 사용자가 클릭하면 다른 웹페이지, 파일, 이메일 주소 등으로 이동할 수 있도록 함
사용법
<a href="링크 주소">링크 텍스트</a>
- href: 링크 주소를 나타냄 이 속성을 사용하여 사용자가 클릭할 때 이동할 위치를 지정함
- 링크 텍스트: 사용자가 클릭할 때 나타나는 링크의 텍스트를 나타냄