[React] 페이지 이동 기능 넣기

my_react_app.zip

0.18MB

 

설치:

npm install react-router-dom

 

💡 목표

버튼 누르면 "Todo List" 화면으로 이동하게 만들고,
모든 페이지에 헤더와 푸터는 항상 나오게 만들자!

🧩 1. 먼저 우리가 만들고 싶은 구조는 이거야

페이지 주소화면에 보이는 내용

/	헤더 + 홈 페이지 본문 + 푸터
/todo_list	헤더 + 투두리스트 본문 + 푸터

 

✅ 헤더랑 푸터는 바뀌지 않고 항상 고정
✅ 가운데 내용(본문)만 주소에 따라 바뀜

 

📁 2. 폴더 구조를 나누는 이유

❓왜 /pages 폴더를 만들까?

• 페이지마다 보여줄 본문 내용을 따로 파일로 관리하려고!
• 예: Home.tsx, TodoList.tsx 같은 것들

❓왜 /components 폴더를 만들까?

• 모든 페이지에서 같이 쓰는 재료들을 넣어두려고!
• 예: Header.tsx, Footer.tsx, Layout.tsx

이렇게 구분해두면

“이건 페이지 본문이고”
“이건 모든 페이지에 항상 필요한 공통 부품이야”
딱 구분이 돼서 코드가 헷갈리지 않아!

 

Layout.tsx: 공통틀 만들기

// src/components/Layout.tsx
import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import { Outlet } from "react-router-dom";

const Layout: React.FC = () => {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
};

export default Layout;

🔍 이게 무슨 뜻이야?

• <Header />, <Footer />는 모든 페이지에서 항상 보여짐
• <Outlet /> ← 요기만 바뀐다!
  👉 즉, Home 페이지면 여기 <Home /> 내용이 들어가고
  👉 /todo_list면 <TodoList /> 내용이 들어감!

🧃 쉽게 말하면: Layout.tsx는 공통 레이아웃을 정의하고,
페이지에 따라 중간 내용만 갈아끼우는 역할!

 

src/pages/Home.tsx

import React from "react";
import { Link } from "react-router-dom";

const Home: React.FC = () => {
  return (
    <>
      <h2>홈 화면이에요!</h2>
      <p>리액트와 타입스크립트를 배워봐요 🎉</p>
      <Link to="/todo_list">
        <button>Todo List로 이동</button>
      </Link>
    </>
  );
};

export default Home;

 

src/pages/TodoList.tsx

import React from "react";

const TodoList: React.FC = () => {
  return (
    <>
      <h2>📝 Todo List 페이지입니다!</h2>
      <p>여기에 할 일을 추가할 수 있어요!</p>
    </>
  );
};

export default TodoList;

❓<> </> 이건 뭐야?

이건 "빈 껍데기 태그"야. 이름은 Fragment(프래그먼트).
div처럼 여러 태그를 묶어주지만 불필요한 HTML 태그가 추가되지 않아서 깔끔해.

 

 

App.tsx: 모든 걸 조립하는 곳!

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./pages/Home";
import TodoList from "./pages/TodoList";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Layout은 공통 틀이고 */}
        <Route element={<Layout />}>
          {/* 여기 안에 있는 것만 바뀜 */}
          <Route path="/" element={<Home />} />
          <Route path="/todo_list" element={<TodoList />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

🔍 이건 무슨 뜻이야?

• BrowserRouter → 주소로 페이지 이동 기능을 켜줌
• Routes → 페이지들을 모아놓는 공간
• Route element={<Layout />} → 기본틀을 먼저 정하고
• 그 안에 Home, TodoList 를 각각 주소(path)로 연결함

👉 즉, Layout 틀은 고정이고, Outlet 자리에 Home 또는 TodoList가 들어가게 되는 구조야!

 

 

✅ 정리: 이렇게 동작해!

1. /로 접속하면 → Layout 틀 안에 Home 내용이 들어감
2. /todo_list로 접속하면 → Layout 틀 안에 TodoList 내용이 들어감

즉, Header랑 Footer는 계속 고정이고, 본문만 바뀌는 아주 깔끔한 구조!

---

🧼 마지막 팁: 폴더 이름은 이렇게 외우면 쉬워

• components = 부품들
• pages = 본문들
• Layout = 부품 조립 틀
• App.tsx = 전체 조립판

 

 

------------------------------------------------ 보충-----------------------------------------------------

• App.tsx는 전체 앱의 길잡이 역할을 해요.
• Layout.tsx는 모든 페이지에서 공통으로 보여지는 틀을 정의해요.
• <Outlet />은 현재 선택된 페이지의 본문 내용이 들어갈 자리 표시자예요.

🧱 전체 구조 이해하기

App.tsx
├── Layout.tsx
│   ├── Header
│   ├── <Outlet /> ← 여기에 페이지 본문이 들어감
│   └── Footer
├── Home.tsx
└── TodoList.tsx

 

• App.tsx에서 라우팅을 설정하고, 각 경로에 따라 어떤 페이지를 보여줄지 결정해요.
• Layout.tsx는 모든 페이지에서 공통으로 보여지는 Header와 Footer를 포함하고 있어요.
• <Outlet />은 현재 경로에 해당하는 페이지의 본문이 들어갈 자리예요.

 

🖼️ 시각적으로 이해하기

+------------------------------------------------+
|                    Header                      |
+------------------------------------------------+
|                                                |
|   [ 현재 경로에 따라 Home 또는 TodoList 내용 ]  |
|                                                |
+------------------------------------------------+
|                    Footer                      |
+------------------------------------------------+

 

• 위의 구조에서 Header와 Footer는 항상 고정되어 있고, 가운데 부분만 현재 경로에 따라 바뀌어요.
• 이 가운데 부분이 바로 <Outlet />이 위치한 곳이에요.

 

🔄 작동 방식 예시

1. 사용자가 / 경로로 접속하면:
   • App.tsx는 Layout.tsx를 렌더링하고, <Outlet /> 자리에 Home.tsx의 내용이 들어가요.
2. 사용자가 /todo_list 경로로 접속하면:
   • App.tsx는 Layout.tsx를 렌더링하고, <Outlet /> 자리에 TodoList.tsx의 내용이 들어가요.