리액트 라우터 : react-router-dom

React Router는 SPA(Single Page Application) 환경에서 페이지 이동처럼 보이는 기능을 구현하기 위해 사용하는 라우팅 라이브러리입니다.

아래에 개념, 필요한 이유, 쓰는 상황, 사용 예제를 정리합니다.

---

1. 라우터(Router)란?

웹에서 라우팅은 "URL 경로에 따라 어떤 화면(페이지)을 보여줄지 결정하는 방식"을 말합니다.
React에서는 실제로는 하나의 HTML 페이지만 있고, 자바스크립트가 URL 경로에 따라 보여줄 컴포넌트를 바꿔주는 방식으로 동작합니다.

---

2. React에서 왜 라우터가 필요한가?

React는 기본적으로 SPA이기 때문에, 페이지를 이동한다고 해도 실제로는 브라우저가 새로고침 없이 컴포넌트를 바꿔 끼우는 방식으로 동작합니다.
따라서, URL 경로에 따라 적절한 컴포넌트를 렌더링해주는 라우팅 기능이 필요합니다.
이걸 도와주는 도구가 React Router입니다.

---

3. 어떤 상황에서 쓰는가?

• 로그인 화면과 메인 화면이 있을 때, 각각의 URL 경로로 이동하고 싶을 때
• /, /login, /about, /todo 등의 경로에 따라 다른 컴포넌트를 보여주고 싶을 때
• 버튼을 눌렀을 때 페이지처럼 보이게 전환되도록 만들고 싶을 때

---

4. 기본 사용 예제

1단계: 설치

npm install react-router-dom

2단계: 라우터 설정

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Todo from './pages/Todo'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/todo" element={<Todo />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

3단계: 페이지 이동

// 예: Home.tsx
import { Link } from 'react-router-dom'

function Home() {
  return (
    <div>
      <h1>홈페이지</h1>
      <Link to="/login">로그인 하러 가기</Link>
    </div>
  )
}

export default Home

---

5. 요약

항목	설명
목적	SPA 환경에서 URL 경로에 따라 다른 컴포넌트를 렌더링
왜 필요한가	새로고침 없이 페이지 전환처럼 동작하게 하기 위해
핵심 구성 요소	<BrowserRouter>, <Routes>, <Route>, <Link>
예시 경로	/, /login, /about, /todo/:id 등

 

React Router는 경로에 따라 다른 UI를 보여주는 방식을 가능하게 해주며, 실제 웹사이트처럼 다중 페이지 느낌을 주는 핵심 기술입니다.

 

---

위 예시말고도 main.tsx에서 나누는 방법도 있던데, 뭐가 다른거지?

질문에서 말한 두 방식은 기능적으로는 동일하지만, 책임을 어디서 나누는지의 차이입니다.
결론부터 말하면:

main.tsx에서 <BrowserRouter>로 감싸든, App.tsx에서 감싸든 동작은 똑같다.
단, 코드 구조와 역할 분리에 있어서 스타일의 차이만 있다.

 

1. 지금 말한 구조 (라우터를 main.tsx에서 설정)

// main.tsx
createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <StrictMode>
      <App />
    </StrictMode>
  </BrowserRouter>
)

이 방식은 전체 애플리케이션을 라우팅 가능한 환경에 올린다는 의미로,
라우팅 환경 설정을 루트(main.tsx)에서 일괄적으로 처리합니다.

장점

• 라우팅 설정이 애플리케이션 루트에 있다는 점이 명확
• App.tsx는 오직 UI 구조만 담당하므로 역할이 분리됨

---

2. 이전에 설명한 구조 (라우터를 App.tsx에서 설정)

// App.tsx
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        ...
      </Routes>
    </BrowserRouter>
  )
}

이 방식은 App.tsx 자체가 라우팅 환경을 담당하도록 만든 구조입니다.
초기 학습이나 소규모 프로젝트에서는 이 구조도 매우 흔하게 사용됩니다.

장점

• App.tsx만 봐도 라우팅 전체 구조를 바로 파악할 수 있음
• 학습 단계에서 이해하기 쉬움

---

정리

항목	main.tsx에서 라우터 설정	App.tsx에서 라우터 설정
역할 분리	명확하게 분리됨	App이 라우터까지 다 관리
규모 확장	확장 시 더 유리	구조가 조금 무거워짐
동작 방식	동일	동일
추천 시점	실무, 팀 프로젝트	소규모, 학습용

---

결론

• 동작에는 차이가 없음
• 규모가 커지면 main.tsx에서 <BrowserRouter>를 감싸고, App.tsx는 화면만 구성하는 방식이 더 권장됨
• 하지만 학습단계나 데모라면 App.tsx에서 라우터 설정하는 것도 충분히 유효함

 

결국 구조적 스타일 선택의 문제이지, 기능상의 문제는 아닙니다.