개발 환경
React + TypeScript
Vite
react-router-dom
react-router-dom는 React에서 SPA(Single Page Appliction)을 개발하는데 필수적으로 사용하는 라이브러리 중 하나입니다.
React(뿐만 아니라 전반적인 웹 프로젝트)에서 다른 페이지로 이동하는 전통적인 방법은 <a> 태그입니다.
<a href="https://www.angelplayer.com">AngelPlayer</a>
하지만 a 태그를 사용하면 경로 이동 시 페이지 전체를 로딩하기 때문에, 새로고침 되는 것 같이 화면이 깜박이는 현상이 발생합니다.
반면 react-router-dom과 <Link> 태그를 이용하면 전체 화면 중 변경되는 부분만 수정되어 출력됩니다.
Router Version
Router는 크게 Router v5 및 Router v6로 나뉩니다.
둘 다 많이 사용하고, 일부 사용법을 제외하면 큰 틀에선 차이가 없습니다.
저는 아래에서 Router v6로 설치 및 적용을 진행해보겠습니다.
npm install react-router-dom@6
# or
yarn add react-router-dom@6
npm i 또는 yarn을 통해서 설치가 가능합니다.
Router v6부터는 Type을 내장하고 있으므로, TypeScript를 사용하더라도 별도의 @types/ 설치는 필요로 하지 않습니다.
// main.tsx 기존 코드
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
React 프로젝트 생성 후 최초의 main.tsx는 <React> 바로 하위에 <App>이 들어있습니다.
그렇기 때문에 프로젝트를 시작하자마자 App 컴포넌트가 출력됩니다.
이제부터는 어떤 화면을 보여줄 것인지를 Router를 통해서 관리하도록 코드를 수정해보겠습니다.
// main.tsx
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<Routes>
{/* <App /> */}
</Routes>
</BrowserRouter>
</React.StrictMode>
);
React 하위에 <BrowserRouter>와 <Routes>를 작성하였습니다.
BrowserRouter는 라우팅 기능을 활성화하고 관리하는 역할을 수행합니다.
Routes는 하위에 <Route> 태그를 통해 어플리케이션의 실제 경로와 경로에 연결된 컴포넌트를 정의합니다.
// Landing.tsx
export default function Landing() {
const id = 'angel';
return (
<div id='display'>
<div className='container'>
<h1>Landing</h1>
<Link to='app'>App</Link>
<br />
<Link to={`/member/${id}`}>Member</Link>
</div>
</div>
);
}
// main.tsx
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path='/' element={<Landing />}></Route>
<Route path='/app' element={<App />}></Route>
<Route path='/member/:id' element={<Member />}></Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
);
<Routes> 태그 하위에 <Route> 태그를 작성합니다.
<Route> 태그는 주소 경로, 주소 경로에 매핑될 컴포넌트 등을 작성합니다.
"/"는 도메인 뒤에 아무 것도 입력하지 않았을 때 이동하는 경로입니다.
추가적으로 주소를 통해 데이터를 받아오는 경우 "/:값"과 같은 형태로 사용할 수 있습니다.
주소로 이동하기
앞서 route를 통해서 "/" 경로로 접근 시 Landing 페이지로 이동하도록 구현하였습니다.
실제 브라우저에서 주소를 쳐서 이동하면 Landing 페이지가 잘 출력되는 것을 확인할 수 있습니다.
Link를 통해 이동하기
// Landing.tsx
export default function Landing() {
const id = 'angel';
return (
<div id='display'>
<div className='container'>
<h1>Landing</h1>
<Link to='app'>App</Link>
<br />
<Link to={`/member/${id}`}>Member</Link>
</div>
</div>
);
}
a 태그 대신 Link 태그를 사용하면 화면의 깜빡임 없이 자연스럽게 화면 전환이 일어난다고 알려드렸습니다.
Link의 to 속성에 router에서 작성한 주소 경로를 입력하면 Link를 클릭 시 해당 페이지로 이동합니다.
member로 이동하는 Link의 경우 to 뒤에 /${id}가 붙어있는 것을 볼 수 있습니다.
이렇게 해서 다른 컴포넌트로 이동할 때 데이터를 함께 전달할 수 있습니다.
// Member.tsx
export default function Member() {
const { id } = useParams();
return (
<div id='display'>
<div className='container'>
<h1>Member</h1>
<p>{id}</p>
</div>
</div>
);
}
넘긴 데이터는 useParams()를 통해서 변수에 저장할 수 있습니다.
넘겨받은 변수도 화면에 잘 출력되는 것을 확인할 수 있습니다.
이벤트 핸들러를 통한 이동하기
export default function Landing() {
const id = 'angel';
const navigate = useNavigate(); // useNavigate 훅 사용
function moveAppHandler() {
console.log("야호! AngelPlayer");
navigate('/app'); // /app 로 이동
}
return (
<div id='display'>
<div className='container'>
<h1>Landing</h1>
<Link to='app'>App</Link>
<br />
<Link to={`/member/${id}`}>Member</Link>
<br />
<button onClick={moveAppHandler}>Go to App</button>
</div>
</div>
);
}
Link 태그를 사용하면 해당 하이퍼링크를 클릭 시 해당 페이지로 바로 이동하게 됩니다.
하지만 이동 전에 특정 로직을 수행하고 다음 화면으로 넘어가고 싶은 경우가 있습니다.
이런 경우 onClick과 같은 이벤트 핸들러에서 이동할 수 있도록 하는 useNavigate()를 사용하면 됩니다.
(v5는 useHistory()를 사용합니다.)
먼저 onClick 시 실행할 함수인 moveAppHandler()를 만들어 줬습니다.
다음으로 const navigate = useNavigate();를 선언한 후 함수 내 필요한 부분에서 navigate('이동경로');를 작성하였습니다.
기존의 링크처럼 정상적으로 App 화면으로 이동하는 것을 확인할 수 있습니다.
다국어 기능 구현하기 (Feat. Next, App Router, TS, next-intl) (1) | 2024.12.28 |
---|---|
[Next.js] Meta Data 및 Open Graph 적용하기 (Feat. Next 14) (0) | 2024.08.02 |
[Next] Next.js에서 폰트(글꼴) 변경하기 (Feat. Google, Local) (0) | 2024.07.07 |
[React] 페이지 이동 시 스크롤 화면 최상단 이동하기 (2) | 2024.02.10 |
[PWA] React 프로젝트에 PWA 적용하기 (1) | 2023.08.23 |