5.0

BrowserRouter

✅ BrowserRouter가 왜 필요하냐?

👉 한마디로, React 앱에 '주소 기능'을 붙여주는 것

---

📌 예

• BrowserRouter가 없으면
  👉 localhost:3000 딱 한 주소에 모든 코드가 다 나옵니다.
  👉 주소창에 /about 이런 걸 쳐도 아무 일 안 일어나요.

---

📌 근데 BrowserRouter를 쓰면?

👉 “이제 우리 앱은 주소를 가질 수 있어!”

• /about이라고 주소를 바꾸면 → About 화면만 보이게 할 수 있고
• /home이면 → Home 화면만 보이게 할 수 있어요.

---

📌 무슨 마법이냐면?

• BrowserRouter가 브라우저의 ‘뒤로가기/앞으로가기/새로고침 없이 화면 바꾸기’를 도와줌
• Route랑 Switch랑 같이 쓰면, “주소가 뭐냐?”를 보고 → 어떤 컴포넌트를 보여줄지 딱 골라서 보여줘요.

---

✅ 핵심 한 줄 정리

👉 BrowserRouter = React 앱에 주소 기능(페이지 이동) 달아주는 문지기!

👉 Switch = 문지기가 보고 “너 지금 주소 뭐야? 알았어! 이 화면 하나만 보여줄게!”

---

🔑 진짜 초간단 그림

<BrowserRouter>
   <Switch>
     <Route path="/about" -> About 화면 보여줌 />
     <Route path="/home" -> Home 화면 보여줌 />
   </Switch>
</BrowserRouter>

🔑 그래서 꼭 알아야 할 것

✅ BrowserRouter 없으면 → 그냥 한 화면
✅ BrowserRouter 있으면 → 주소로 화면을 나눌 수 있음!

Switch : 한 번에 하나의 Route를 렌더링 할 수 있는 방법