리액트 공부하기 - React Router 리액트 라우터

1. 리액트 라우터란?
2. 리액트 라우터 사용하는 법
3. 궁금증 두가지. (왜 설치를 따로해야하는가? 주소를 이동하는건데 새로고침이 안된다고 ?!)
4. 리액트 라우터 주요 컴포넌트
5. 리액트 라우터 주요 함수
1. 리액트 라우터(React Router)란?
웹사이트에서 페이지를 이동할 수 있게 해주는 도구야.
예를 들어:
- /home을 누르면 홈 화면,
- /about을 누르면 소개 화면,
이렇게 주소(URL)에 따라 다른 컴포넌트를 보여주고 싶을 때 사용하는 거야.
리액트는 기본적으로 "한 페이지 앱(SPA)"이기 때문에 페이지를 이동해도 새로고침 없이 부드럽게 화면이 바뀌는 게 특징인데, 그걸 라우팅이라고 하고 그걸 도와주는 게 React Router야!
2. 리액트 라우터 사용하는 법
- 라이브러리 설치
npm install react-router-dom
여기서 생긴 나의 궁금증.. 좋은 기능인데 왜 또 따로 설치해 ...

착한 지피티의 설명 :
좋은 의문이야! 사실 React 자체는 아주 심플한 UI 라이브러리야. 필요한 기능은 필요할 때만 따로 설치해서 사용하는 "모듈식" 구조야.
React 팀의 철학은: "필요한 기능만 설치해서 가볍게 써라!" 그래서 react-router-dom도 직접 npm install 해서 설치해야 해. React를 사용하는 모든 프로젝트가 라우팅을 필요로 하는 건 아니니까 말이지!
주소를 이동하는건데, 새로고침이 안된다는게 무슨 말이지 ?

보통 예전의 웹 사이트는 여러가지 html로 이루어져있었다.

리액트로써는 html 페이지가 아니라,, 컴포넌트로 갈아끼우면서 보여주는거구나 !
🧚♀️정리하면
- React는 처음에 한 번만 전체 앱을 로드.
- 주소만 바꾸고, 컴포넌트만 갈아끼우는 식으로 작동.
- 그래서 새로고침 없이 부드럽게 화면 전환 가능!
- 이걸 도와주는 게 React Router!
🧚♀️ Q: 주소가 바뀌는 게 진짜야 ?
→ YES!
브라우저 주소창에 보이는 URL은 진짜로 바뀌어!
예를 들어:
- localhost:3000/home
- localhost:3000/about
→ 이렇게 실제로 주소창에 바뀌는 거 맞아.
다만, 그게 서버로 요청을 보내는 방식이 아니라
브라우저 안에서 자바스크립트가 조용히 주소를 바꿔주는 거야.
3. 리액트 라우터 주요 컴포넌트


이 때, 리액트의 app컴포넌트를 이 브라우저 라우터 컴포넌트로 ㄱ감싸면, 리액트 라우터의 기능을 어디서든 사용 가능

링크 컴포넌트의 간단한 예시다.



메인을 누르면 메인 주소로 이동하게 되고, 이 때 새로 고침은 발생되지 않는다.


라우츠로 라우트가 묶인 것을 볼 수 있는데
패스 속성에 작성된 주소에 접근하면 엘리먼트 속성에 작성된 컴포넌트를 화면에 보여준다.
메인 이라는 주소로 접근 하게 되면, 메인 컴포넌트를 띄워주고
마이 페이지라는 주소로 접근 하면, 마이 페이지 컴포넌트 띄워주고
테스트라는 주소로 접근 하면, 테스트 컴포넌트 띄워주는 식으로

메인 페이지로 접근 하게 되면, 엘리먼트 속성인 div 메인페이지를 보여주고
4. 리액트 라우터 주요 함수 (훅)

4- 1. useNavigate
→ 다른 페이지로 이동할 때 쓰는 훅
→ 버튼 누르면 다른 페이지로 가기. 같은 것 할때 주로 사용
🍑예시:
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const goToAbout = () => {
navigate('/about'); // → /about으로 이동!
};
return <button onClick={goToAbout}>Go to About</button>;
}
✨ navigate() 함수는 마치 "주소 바꾸기 버튼" 같은 역할!
근데 그냥 Link로 하면 안되는건가 ? 의문이 생겼다.

✓공통점
둘 다 페이지 이동을 해줘!
- 둘 다 새로고침 없이 부드럽게 이동
- 주소만 바꾸고, React 컴포넌트만 바꿈
하지만.. 차이는 아래와 같다.
✓ <Link>: 보통 “메뉴”나 “링크”처럼 클릭해서 이동할 때 사용
💬 딱 a 태그랑 비슷하게 생겼다.
import { Link } from 'react-router-dom';
function Nav() {
return (
<nav>
<Link to="/home">홈</Link>
<Link to="/about">소개</Link>
</nav>
);
}
- 클릭 가능한 텍스트 or 버튼
- 사용자가 직접 클릭해야 이동됨
- JSX 안에서 쓰는 링크 태그
🕊️ 정적인 이동에 적합 (사람이 클릭할 때)
✓ useNavigate: 버튼 클릭, 조건 만족 시 자동으로 이동할 때 사용
💬 “프로그래밍적으로 이동”하는 느낌이야!
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const handleLogin = () => {
// 로그인 처리 코드...
navigate('/dashboard'); // 로그인 성공하면 자동으로 이동
};
return <button onClick={handleLogin}>로그인</button>;
}
- 사용자 클릭 외에도 조건에 따라 이동 가능
- 함수 안에서 쓰기 편함
🕊️ 동적인 이동에 적합 (버튼, 조건, 이벤트 등)

4- 2. useLocation
→ 지금 페이지의 URL 정보를 가져올 때 사용
→ "지금 내가 어디 있지 ? "를 알 수 있다.
🍑예시:
import { useLocation } from 'react-router-dom';
function CurrentPage() {
const location = useLocation();
return <p>현재 주소는: {location.pathname}</p>;
}
✨ location.pathname → /home, /about 이런 현재 주소가 나와.
useParams와
useSearchParams의 차이를 알기 전에, 짚고 가야할 개념이 먼저 있다.🫶🏻
🤍 주소의 두 가지 스타일 정리
1. /post/3 → “경로 기반 (Path Parameter)”
- 이건 URL 안의 구조 자체에 의미가 있어!
- /post/3 ➜ “3번 글을 보여줘” 라는 뜻이야
- 마치 /폴더/파일 이런 식으로 정해진 위치 느낌!
이 구조에서 3은 "누구나 봐도 이게 글 번호겠구나" 싶지? 이때 쓰는 게 useParams
2. /search?query=apple 👉 “쿼리 스트링 (Search Params)”
- 이건 URL 뒤에 ? 붙여서 추가적인 정보를 전달하는 방식이다 !
- /search?query=apple → "검색 페이지에서 query=apple"로 검색했어
즉 페이지는 같고, 검색 조건만 달라지는 거야. 이 때 쓰는게 useSearchParams
4- 3. useParams
→ 주소 안에 들어있는 변수값을 꺼낼 때
→ /post/123 이런 주소에서 123을 꺼내고 싶을 때!
/post/3 → “경로 기반 (Path Parameter)”
- 이건 URL 안의 구조 자체에 의미가 있어!
- /post/3 ➜ “3번 글을 보여줘” 라는 뜻이야
- 마치 /폴더/파일 이런 식으로 정해진 위치 느낌!
🍑예시:
<Route path="/post/:id" element={<Post />} />
import { useParams } from 'react-router-dom';
function Post() {
const { id } = useParams(); // 주소의 :id 부분!
return <h2>이 글의 ID는 {id}입니다.</h2>;
}
✨ :id 같은 건 **URL 안의 변수(파라미터)**야!
4- 4. useSearchParams
→ 주소 뒤에 붙는 ?name=Jane 같은 값을 다룰 때
→ 주소가 /home?name=Jane&age=20 이면, → 거기서 name과 age 꺼내오는 도구야.
2. /search?query=apple 👉 “쿼리 스트링 (Search Params)”
- 이건 URL 뒤에 ? 붙여서 추가적인 정보를 전달하는 방식이다 !
- /search?query=apple → "검색 페이지에서 query=apple"로 검색했어
즉 페이지는 같고, 검색 조건만 달라지는 거야. 이 때 쓰는게 useSearchParams
🍑예시:
import { useSearchParams } from 'react-router-dom';
function Home() {
const [searchParams] = useSearchParams();
const name = searchParams.get('name'); // "Jane"
const age = searchParams.get('age'); // "20"
return <p>{name} 님은 {age}살입니다.</p>;
}
📌 검색어, 필터 값, 페이지 번호 같은 걸 URL에 넣을 때 자주 써!


출처 : 오즈코딩스쿨, 챗지피티, 구글링