$$config title: [React] Link & useNavigate keywords: - IT - Link - useNavigate $$ ? 리액트에서 화면 이동을 위해 사용하는 두 가지 방법과 두 방법의 차이점에 대해 알아보자 !
* 라이브러리 설치 ```` npm install react-router-dom --save ````
# 1. Link ````js import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' import Home from './routes/Home' import Write from './routes/Write' function App() { return (

}> }>

) } export default App ```` - Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법이다. - 클릭 시 바로 이동하는 로직 구현 시에 사용하기 좋다. - react-router-dom 에서 제공하는 Link 컴포넌트는 DOM 에서 a 태그로 변환이 된다. - 이런 a 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동을 시켜준다.
✍ ````a 태그와 Link 차이```` - a : 외부 프로젝트로 이동하는 경우 - Link : 프로젝트 내에서 페이지 전환하는 경우
# 2. useNavigate ````js import React from 'react' import axios from 'axios' import { useState } from 'react' import { url } from '../../util/url' import { useNavigate } from 'react-router-dom' const WriteContent = () => { const navigate = useNavigate() const [writeData, setWriteData] = useState({ writeTitle: ' ', writeContent: ' ', }) const writeCreate = async () => { const json = await axios({ url: `${url}/question/write?title=${writeData.writeTitle}&content=${writeData.writeContent}`, method: 'POST', }) if (json.data === '작성완료') { alert('성공적으로 작성되었습니다') setWriteData(() => { return { writeTitle: '', writeContent: '', } }) navigate('/') } } return (

```` - useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환 한다. 반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다. - Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 위와 같이 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.
# 활용법 1️⃣ ````Link```` 클릭 시 바로 이동하는 로직 구현 시에 사용 ex) 상품 리스트에서 상세 페이지 이동 시
2️⃣ ````useNavigate```` 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용 ex) 로그인 버튼 클릭 시 회원가입 되어 있는 사용자 -> Main 페이지로 이동 회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동