3월 14일 TIL

임덤덤·2023년 3월 14일
0

브라우저 이동

  • 브라우저를 이동하는 방법에는 여러가지가 있다 개발 환경에따라 혹은 어떤 라이브러리를 사용하냐에 따라 달라질수있고 필자본인은 React 위주의 개발을 하고있기 때문에 React 위주로 설명할 예정

useNavigate

  • React Route Dom의 내장함수이다
    • 단순이동 시키는 Link와 햇갈릴수 있는데 useNavigate는 특정한 이벤트가 실행되었을때 동작하도록 하거나 추가적인 로직이 필요할 경우에 사용되는 경우가 많다

사용법

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
  1. useNavigate를 import해온다
  2. navigate에 useNavigate함수를 변수에 할당한다
  3. 매개변수로 첫번째 인자는 이동시킬 페이지의 주소나 -1을 넣어서 페이지 히스토리의 뒤로가기버튼과 같은 동작을 시킬 수도 있음
  4. 매개변수로 두번째 인자는 option이고 다양한 설정 옵션을 제공하고 있어서 세부적인 제어를 할수있게 해줌

두번째 매개변수의 세부기능들

  • replace: 기본값은 false고 true로 설정하게 되면 navigate대신 replace를 동작함
    • 탐색하는 스택에서 현재페이지를 제거하고 새페이지로 교체하게됨
  • state: navigate로 이동할때 state 매개변수에 전달할 객체를 설정할 수 있음
    • 이 객체는 새 페이지로 전달되서 페이지가 이동할때 상태 정보를 전달 할 수 있음
  • replaceIf: 이 옵션은 두개의 값을 가지는데 첫번째 값은 조건, 두번째 값은 navigate나 replace의 여부
    • 조건이 true면 replace를 실행하고 false면 navigate를 실행함

  • 이 컴포넌트는 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: 링크 주소를 나타냄 이 속성을 사용하여 사용자가 클릭할 때 이동할 위치를 지정함
  • 링크 텍스트: 사용자가 클릭할 때 나타나는 링크의 텍스트를 나타냄
profile
응애🐣 예비 개발자 입니다.

0개의 댓글