✍️ 3주차 복습

💡 배운점

react-router-dom

React에서 페이지 간 이동(라우팅)을 구현할 수 있게 해주는 라이브러리이다.
React는 기본적으로 SPA (Single Page Application) 이기 때문에 서버에서 페이지를 새로 불러오지 않고도, URL만 바꿔서 다른 화면처럼 보이게 만들어야 한다. 하지만 React 기본만으로는 URL에 따라 페이지를 바꾸는 기능이 없다.
→ 이걸 도와주는 게 바로 react-router-dom 이다.

기능

기능	설명
BrowserRouter	라우터의 전체 범위를 감싸는 최상위 컴포넌트
Route	특정 URL 경로와 컴포넌트를 연결
Routes	여러 개의 Route를 묶는 컴포넌트
Link	<a> 태그처럼, 페이지 이동용 버튼
useNavigate	코드로 페이지 이동할 수 있게 해주는 Hook

구현

main.jsx에서 BrowserRouter 로 App.jsx 를 감싼 것을 볼 수 있다.

App.jsx 안에서는 Routes 를 사용하여, 여러개의 Route를 묶어주었고, Route 안에는 MainPage, AxioPpage, UseEffectPage를 입력하여, 각각 다른 URL에서 보여줄 페이지 컴포넌트를 넣었다. Link 컴포넌트를 사용하여 페이지 간 이동을 위한 내비게이션 메뉴를 만들어, 브라우저의 전체 새로고침 없이도 URL을 변경하여 부드럽게 화면 전환을 가능하게 하였다.

MainPage.jsx 에서는 useNavigate 를 사용하여, Axios 와 UseEffect 페이지로의 이벤트 기반 동적 페이지 이동을 구현하였다.이를 통해 사용자가 버튼을 클릭하면 전체 페이지를 새로 고침하지 않고도 원활하게 다른 페이지로 전환된다.

✍️ 느낀점

React에서 react-router-dom을 활용해 SPA에서의 라우팅을 구현하면서, 하나의 페이지 안에서 다양한 화면을 자연스럽게 전환할 수 있다는 점이 흥미로웠다. Route, Routes, Link 로 페이지 이동을 구현하며 전체적인 구조를 이해하게 되었다.
이번 활동을 통해 프론트엔드 개발에서 사용자 경험(UX) 을 부드럽게 만들기 위해서는 라우팅 설계가 매우 중요하다는 것을 깨닫게 되었고, 앞으로 다양한 프로젝트에서 라우팅 구조를 구현해야겠다는 생각이 들었다.