TIL : route vs components

한 줄 요약

• routes 👉 “URL에 직접 대응되는 페이지 단위 컴포넌트”
• components 👉 “페이지를 구성하는 재사용 가능한 조각들”

---

1️⃣ routes 폴더: “페이지”라고 이해하시면 됩니다

routes/
 ├─ home.tsx
 ├─ login.tsx
 ├─ create-account.tsx
 └─ profile.tsx

이 파일들의 공통점은 보통 이런 형태입니다:

// routes/login.tsx
export default function Login() {
  return (
    <div>
      <h1>로그인</h1>
      {/* 여러 컴포넌트 조합 */}
    </div>
  );
}

routes의 특징

• URL과 1:1 대응

  • /login → login.tsx
  • /profile → profile.tsx

• 보통 라우터에서 직접 import됨

• 한 화면 전체를 책임짐

• 다른 페이지에서 재사용되는 경우는 거의 없음

👉 그래서
✅ “라우트 = 각각의 페이지”
라고 이해하셔도 됩니다.

---

2️⃣ components 폴더: “재료 / 부품 / 블록”

components/
 └─ layout.tsx

components의 특징

• URL과 직접적인 관계 없음
• 여러 페이지에서 공통으로 사용
• UI 조각 / 로직 단위

예를 들면:

• Header
• Footer
• Layout
• Button
• Input
• Modal
• Avatar
• PostCard

// components/layout.tsx
export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

👉 이 Layout은

• home에서도
• profile에서도
• login에서도
  필요하면 어디든 사용 가능

그래서 말씀하신 표현 중 이 부분이 정확합니다 👇

페이지에 삽입되는 구성요소
어디서든 원하면 페이지 어디든 추가할 수 있는 요소

✔️ 맞습니다.

---

3️⃣ App.tsx / main.tsx가 하는 역할 (중요)

보통 구조는 이렇게 흘러갑니다:

main.tsx
 └─ App.tsx
     └─ Router
         └─ routes/*

// App.tsx 예시
<BrowserRouter>
  <Layout>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  </Layout>
</BrowserRouter>

여기서 핵심:

• routes → Router에 등록되는 대상
• components → routes 안에서 조합되는 대상

---

4️⃣ 비유로 한 번에 정리

🏠 웹사이트 = 건물

• routes = 각 방

  • 거실(Home)
  • 침실(Profile)
  • 현관(Login)

• components = 가구

  • 소파(Header)
  • 테이블(Button)
  • 조명(Layout)

👉 방은 주소(URL)가 있지만
👉 가구는 주소가 없습니다

---

5️⃣ 실무 기준으로 폴더를 나누는 판단 기준

❓ 이 파일은 어디에 둬야 할까?

아래 질문을 해보세요

1. URL로 직접 접근해야 하나?

   • YES → routes

2. 다른 페이지에서도 재사용될 가능성이 있나?

   • YES → components

3. Router에 등록될까?

   • YES → routes

---

지금 구조는 좋은가?

✅ 네, 지금 구조는 아주 교과서적인 초기 구조입니다.
특히 layout.tsx를 components에 둔 것도 정확합니다.

나중에 프로젝트 커지면 보통 이렇게 확장됩니다:

components/
 ├─ layout/
 ├─ ui/
 ├─ auth/
 └─ common/

routes/
 ├─ home.tsx
 ├─ login.tsx
 └─ profile.tsx

---

마지막 정리 (진짜 핵심)

• routes = 페이지
• components = 페이지를 만드는 부품
• routes는 components를 사용하지만
• components는 routes를 모름