지선생님의 커리큘럼 따라가기 다음단계를 해보겠읍니다.
지난번까지는 TodoList만들기를 해봤는데, 이제는 여러 페이지를 연결하는 법을 알려준대여.
라우팅을 하는법을 알려준다는데 라우팅은 url에 해당하는 페이지로 이동시켜주는 그런 느낌인듯.
리액트 라우터를 설치하래여. 즉시.
설치하고 나서는 라우터를 설정하래요
App.js를 아래처럼 수정해줍니다.
// src/App.js
import React, {useState} from 'react';
import {BrowerRouter as Router, Routes, Route, Link} from 'react-router-dom';
import TodoListPage from './pages/TodoListPage';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
function App() {
return(
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/todos">Todo List</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="/todos" element={<TodoListPage/>}/>
<Route path="/about" element={<AboutPage/>}/>
</Routes>
</Router>
);
}
export default App;
- BrowserRouter: SPA의 라우팅을 지원합니다.
- Routes와 Route: 각각의 경로에 컴포넌트를 연결합니다.
- Link: 페이지 간 탐색을 위한 링크를 생성합니다.
지선생님이 저렇대요.
BrowserRouter를 통해 라우팅을 하도록 하고,
Routes는 여러 Route를 감싸는것 같아요.
Link는 그냥 <a>태그 느낌인듯
이제 다음으로 각 페이지 컴포넌트를 만들거에요.
src폴더 밑에 pages라는 폴더를 하나 만들고 거기다 컴포넌트 3개를 만들어서 넣어줄겁니당.
첫 번째로
HomePage.js 를 만들어줍시다. 코드는 아래와 같습니다.
import React from 'react';
function HomePage() {
return (
<div>
<h1>Welcome to the Todo App!</h1>
<p>This is the home page of our simple React app.</p>
</div>
);
}
export default HomePage;
두 번째로
TodoListPage.js 를 만들어줄게요. 코드는 아래와 같습니다.
import React, { useState } from 'react';
import TodoList from '../TodoList';
import TodoForm from '../TodoForm';
function TodoListPage() {
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
const newTodo = {
id: Date.now(),
text,
completed: false,
};
setTodos([...todos, newTodo]);
};
const toggleTodo = (id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
const removeTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};
return (
<div>
<h1>Todo List</h1>
<TodoForm addTodo={addTodo} />
<TodoList todos={todos} toggleTodo={toggleTodo} removeTodo={removeTodo} />
</div>
);
}
export default TodoListPage;
전에 작성했던 코드를 거의 그대로 옮겨주기만 하면 대여
이제 마지막
AboutPage.js 코드는 아래와 같습니다.
import React from 'react';
function AboutPage() {
return (
<div>
<h1>About This App</h1>
<p>This app is built using React. It allows you to manage your tasks efficiently.</p>
</div>
);
}
export default AboutPage;
홈페이지랑 어바웃페이지는 그냥 머 없이 페이지만 그려서 넘겨주고 투두리스트페이지에 기능이 들어가네여.
이제 즉시 실행해서 확인해보기.
일단 시작페이지는 위와 같네여
Home을 누르면 그냥 위 페이지가 보여여
Todo List를 누르면?
전에 만들었던 투두리스트가 나오고 추가할수 있어요.
About을 누르면
이렇게 어바웃 페이지가 나온답니다.
근데 다시 Todo List로 가면 내가 추가한거 사라져잇음..
다시 유지하려면 어떻게하지? 는 지피티가 언젠가 알려주겟죠? 그냥 지선생 믿어 그냥
이제 다음!
지선생님이 동적라우팅이랑 API연동을 알려준대여
일단 동적라우팅까지만 알아봅시당
/todos/1 처럼 이동햇을때 보여줄 수 있도록 해준다는것 같아요.
App.js 를 아래처럼 수정해줍시다.
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import TodoListPage from './pages/TodoListPage';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import TodoDetailsPage from './pages/TodoDetailsPage';
function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/todos">Todo List</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/todos" element={<TodoListPage />} />
<Route path="/todos/:id" element={<TodoDetailsPage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</Router>
);
}
export default App;
import TodoDetailsPage from './pages/TodoDetailsPage';
...
<Route path="/todos/:id" element={<TodoListPage/>}/>
위 두 줄이 추가됐어요.
그럼 이제 TodoDetailsPage를 만들어야겠져?
TodoDetailsPage.js 코드는 아래와 같습니당
import React from 'react';
import { useParams } from 'react-router-dom';
function TodoDetailsPage() {
const { id } = useParams();
return (
<div>
<h1>Todo Details</h1>
<p>This is the details page for Todo ID: {id}</p>
</div>
);
}
export default TodoDetailsPage;
useParams: URL 매개변수를 읽을 수 있는 React Router 훅입니다.
useParams이라는 새로운 친구가 나타났는데 URL에서 매개변수를 읽을 수 있대여
App.js에서 /todos/:id 로 라우팅을 해줬는데 id를 읽는것 같아요.
이제 Todo 항목을 클릭햇을때 이동할 수 잇도록
TodoItem도 수정해줍니다.
코드는 아래와 같습니다.
TodoItem.js
import React from 'react';
import { Link } from 'react-router-dom';
function TodoItem({ todo, toggleTodo, removeTodo }) {
return (
<li style={{ display: 'flex', alignItems: 'center' }}>
<Link to={`/todos/${todo.id}`} style={{ flex: 1, textDecoration: 'none', color: 'black' }}>
<span
style={{
textDecoration: todo.completed ? 'line-through' : 'none',
cursor: 'pointer',
}}
onClick={(e) => {
e.stopPropagation(); // 링크 클릭 시 toggleTodo 방지
toggleTodo(todo.id);
}}
>
{todo.text}
</span>
</Link>
<button onClick={() => removeTodo(todo.id)} style={{ marginLeft: '10px' }}>
Delete
</button>
</li>
);
}
export default TodoItem;
Link로 감싸서 눌릴 수 있도록 하고, /todos/{id}로 이동할 수 있도록 수정했습니다.
그리고 이제 TodoList 페이지에서 아무거나 추가하고 제목을 클릭하면!!
url에서 id에 해당하는 부분을 갖고와서 사용할 수 있습니다.
아주좋습니다.
라우팅하는 방법, 동적 라우팅 하는 방법에 대해 잘 배웠네요.
다음엔 API연동하는 방법을 알아보겠읍니다.
끝!
'React' 카테고리의 다른 글
| GPT로 배워보는 리액트 - 5(TodoList 만들기) (3) | 2024.11.25 |
|---|---|
| GPT로 배워보는 리액트 - 4 (2) | 2024.11.13 |
| GPT로 배워보는 리액트 - 3(상태와 이벤트 처리) (0) | 2024.11.11 |
| GPT로 배워보는 리액트 - 2 (리액트 기본 개념, 실습) (0) | 2024.11.11 |
| GPT로 배워보는 리액트 - 1 (2) | 2024.11.11 |
