React 라우터 : Link & UseNavigate

본격 실전 프로젝트 들어가기전 팀원들과 우아한 형제들 클론코딩을 해보자! 해서

일주일 정도 프로젝트를 진행하는데 역시 프로젝트를 하면서 배우는게 정말 많은 것 같다.

어떤 걸 써야하나라는 고민에서부터  이걸 왜 쓰지?라는 의문점도 생겨서

다시 그전에 공부했던 것들을 찾아보면서 개념 정리를 다시한번 하게 되는 것 같다.

 

페이지 navbar를 구현하려고 했을 때 머릿속에 a태그와 link컴포넌트, useNavigate라는 훅까지 한번에 떠올랐는데

어떤걸 써야할까?라는생각이들었고

우선 a태그는 html에서 사용하는 태그인데 리액트에는 link컴포넌트로 써라~ 라고 배웠고,

useNavigate도 페이지를 써야하는데 link컴포넌트와 둘중에 무엇을 써야하는지 고민이 되었다.

 

그래서 차이점을 이해하고자 찾아보았다.

🧃 Link => html의 a태그 기능을 하는 리액트 컴포넌트

변수로 선언해서 반환된 함수를 호출

필요한 부분만 재렌더링함

import {Link} from 'react-router-dom';

<Link to="/login">로그인</Link>

=> navbar로 치면 home, mypage, detail 등 바로 페이지로 이동할수 있게 한다.

🧃 UseNavigate => 페이지를 이동하는 리액트 hook

터미널에 입력

npm install react-router-dom --save

jsx파일에 import 해줌

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

return (
    <div onClick={()=>{navigate('/')}}>Home</div>
    <div onClick={()=>{navigate('/detail')}}>Detail</div>
)

=> 어떠한 이벤트나 조건을 만족시 해당 페이지로 이동할수 있도록 조절할수 있는 방법이다.

=> 예를들어, 아이디가 없으면 회원가입페이지, 아이디가 있으면 로그인페이지로 이동할 수 있게 한다.