https://github.com/devyubi/til_react_cra_ts
React 의 TypeScript 버전
https://github.com/devyubi/til_react_cra_ts
Last synced: 2 months ago
JSON representation
React 의 TypeScript 버전
- Host: GitHub
- URL: https://github.com/devyubi/til_react_cra_ts
- Owner: devyubi
- Created: 2025-08-05T02:47:24.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-20T09:03:31.000Z (10 months ago)
- Last Synced: 2025-08-20T11:19:59.218Z (10 months ago)
- Language: TypeScript
- Size: 573 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-router-dom
## 1. 설치
- vercel 에서는 v7.0 최신 버전 오류
- 설치는 v6 를 설치하자.
```bash
npm i react-router-dom@6.30.1
```
## 2. 폴더 및 페이지 구성
- /src/pages 폴더 생성
### 2.1. Home.tsx
### 2.2. TodoReadPage.tsx
```tsx
import TodoList from '../components/todos/TodoList';
import { NavLink } from 'react-router-dom';
function TodoReadPage() {
return (
할일 목록
새 할일 작성
);
}
export default TodoReadPage;
```
### 2.3. TodoWritePage.tsx
```tsx
import TodoWrite from '../components/todos/TodoWrite';
import { NavLink } from 'react-router-dom';
function TodoWritePage() {
return (
할일 작성
목록
);
}
export default TodoWritePage;
```
### 2.4. TodoEditPage.tsx
```tsx
import { useEffect, useState } from 'react';
import { useTodoActions, useTodoState } from '../context/todo/hooks';
import { NavLink, useNavigate, useParams } from 'react-router-dom';
function TodoEditPage() {
const navigate = useNavigate();
// ts 자리
const { id } = useParams<{ id: string }>();
const { todos } = useTodoState();
const { editTodo } = useTodoActions();
const result = todos.find(item => item.id === id);
// 편집 중인 타이틀 보관 state
const [title, setTitle] = useState('');
useEffect(() => {
if (result) {
setTitle(result.title);
}
}, [result]);
if (!id) {
return (
잘못된 id 요청입니다.
목록으로
);
}
if (!result) {
return (
내용을 찾을 수 없습니다.
목록으로
);
}
const handleSave = () => {
const trim = title.trim();
if (!trim) return;
editTodo(result.id, title);
navigate('/todos/read');
};
return (
할일 수정
목록
제목
setTitle(e.target.value)}
/>
저장
취소
);
}
export default TodoEditPage;
```
### 2.5. TodoDetailPage.tsx
```tsx
import { NavLink, useParams } from 'react-router-dom';
import { useTodoActions, useTodoState } from '../context/todo/hooks';
function TodoDetailPage() {
// http://localhost:3000/todos/id
const { id } = useParams<{ id: string }>();
// 전체 todos State 를 가져오겠다.
const { todos } = useTodoState();
const { toggleTodo } = useTodoActions();
// id 를 이용해서 해당 상세 내용 가져오기
const result = todos.find(item => item.id === id);
if (!id) {
return (
잘못된 id 요청입니다.
목록으로
);
}
if (!result) {
return (
내용을 찾을 수 없습니다.
목록으로
);
}
return (
할일 상세
수정
목록
ID
{result.id}
{result.completed ? '완료' : '진행중'}
제목
{result.title}
toggleTodo(result.id)}
className="rounded-md border border-neutral-300 px-4 py-2 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
>
{result.completed ? '완료 취소' : '완료로 표시'}
);
}
export default TodoDetailPage;
```
### 2.6. NotFound.tsx
### 2.7. Settings.tsx
## 3. 컴포넌트 수정
- /src/components/todo/TodoItem.tsx
```tsx
import { Link } from 'react-router-dom';
import { useTodoActions } from '../../context/todo/hooks';
import { TodoType } from '../../types/todoType';
type TodoItemProps = {
todo: TodoType;
};
const TodoItem = ({ todo }: TodoItemProps) => {
// js 자리
const { toggleTodo, deleteTodo } = useTodoActions();
return (
toggleTodo(todo.id)}
checked={todo.completed}
className="accent-brand h-4 w-4"
/>
{todo.title}
수정
deleteTodo(todo.id)}
className="rounded-md border border-red-300 px-3 py-1 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
>
삭제
);
};
export default TodoItem;
```
## 4. 라우터 구성
- App.tsx 적용
- 기본구성
```tsx
```
```tsx
import { NavLink, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import { TodoProvider } from './context/todo/TodoProvider';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import Settings from './pages/Settings';
import TodoReadPage from './pages/TodoReadPage';
import TodoWritePage from './pages/TodoWritePage';
import TodoDetailPage from './pages/TodoDetailPage';
import TodoEditPage from './pages/TodoEditPage';
function App(): JSX.Element {
// ts 자리
const toggleDark = () => {
document.documentElement.classList.toggle('dark');
};
// tsx 자리
return (
{/* 상단메뉴 */}
할일 앱 서비스
홈
읽기
생성
설정
다크모드
라이트모드
} />
{/* todos 관련 route ---*/}
} />
} />
} />
} />
} />
{/* todos 관련 route ---- */}
} />
} />
할일 앱 서비스 개발 @ 홍길동
);
}
export default App;
```