TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit)
TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drillin
zerotonine2da.tistory.com
Lv3
- Lv3의 과제에서 json-server를 추가합니다.
- Todo를 Create, Delete, Update(완료/취소), Read(From Json-server)가 가능해야 합니다.
- Lv2의 코드를 고쳐서 만듭니다.
Keyword
DB
1. json-server 설치
yarn add json-server
2. json-server 실행 + db.json 수정 ==> 터미널에서 "yarn json"으로 실행
"scripts":
{
"json": "json-server --watch db.json --port 5000",
}
3. 비동기통신 axios 설치
yarn add axios
4. 코드
(1) db.json
{
"todos": [
{
"id": "fcb98f4f-fcd5-ed8e-38db-b35cd18c661c",
"title": "리액트",
"content": "투두리스트 만들기",
"isDone": true
},
{
"id": "76e94fc5-6e8f-4412-f214-052b7a77f311",
"title": "리덕스 툴킷",
"content": "투두리스트 만들기",
"isDone": true
},
{
"id": "f693fba7-7baa-030c-7f3e-9047cb6fd53a",
"title": "Json-server",
"content": "투두리스트 만들기",
"isDone": true
},
{
"id": "b7eddf7b-4a72-a62c-deb1-d19883351b7b",
"title": "리덕스 Thunk",
"content": "투두리스트 만들기",
"isDone": false
},
{
"id": "6c6132b8-350d-2bb4-f4c0-fd0facbdbd91",
"title": "리액트 쿼리",
"content": "투두리스트 만들기",
"isDone": false
}
]
}
(2) .env
REACT_APP_SERVER_URL = http://localhost:5000
(3) api.tsx
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.REACT_APP_SERVER_URL,
});
instance.interceptors.request.use(
//요청 보내기 전 실행되는 함수
function (config) {
console.log('인터셉트 성공');
return config;
},
function (error) {
console.log('인터셉트 오류');
return Promise.reject(error);
}
);
instance.interceptors.response.use(
function (response) {
console.log('인터셉트 응답 성공');
return response;
},
function (error) {
console.log('인터셉트 응답 오류');
return Promise.reject(error);
}
);
export default instance;
▶ .env + api.tsx 에서 생성한 인스턴스로 컴포넌트에서 사용
//const { data } = await axios.get('http://localhost:5000/todos');
const { data } = await api.get('/todos');
▶ .env + api.tsx 없으면 로컬주소를 다 입력해야함
▶ 사용시, api를 import 해서 사용할 수 있음.
(4) InputForm.tsx (입력 파트)
const add = await api.post(`/todos/`, newData);
dispatch(addTodo(add.data));
▶ post 메소드를 사용해서 데이터 추가
▶ 리덕스 툴킷 사용해서 상태 변경
(5) Content.tsx (조회, 수정, 삭제 파트)
function Content({ isDone }: Props) {
const dispatch = useAppDispatch();
const todos = useSelector((state: RootState) => state.todos);
//데이터 가져오기
const fetchData = async () => {
const { data } = await api.get('/todos');
dispatch(fetchTodo(data));
};
useEffect(() => {
fetchData();
}, []);
▶ 데이터 조회 구간 : get 메소드로 db.json에 저장된 데이터 조회
1) useEffect를 사용해서 화면이 mount될때 fetchData() 함수 실행
2) 데이터를 조회하고 리덕스 툴킷 사용해서 상태 변경
★ 데이터는 리덕스툴킷을 사용하니 useSelector를 사용해서 데이터를 읽어야함! ★
- 초반에, 데이터를 useState로 사용해서 가져오려고 해서 안 보이는 오류 발생했었음
const removeHandler = async (e: React.MouseEvent<HTMLButtonElement>, id: string) => {
try {
dispatch(removeTodo(id));
await api.delete(`/todos/${id}`);
} catch (error) {
console.log('삭제 오류', error);
}
};
▶ 데이터 삭제 구간 : delete 메소드로 db.json에 저장된 데이터 삭제
★순서 중요 ★
1) 화면에 있는 데이터를 먼저 안보이게 하고
2) db.json에 있는 데이터를 삭제해야함
const changeHandler = async (e: React.MouseEvent<HTMLButtonElement>, id: string) => {
try {
const change = await api.patch(`/todos/${id}`, {
isDone: !isDone,
});
const changeId = change.data.id;
dispatch(switchTodo(changeId));
} catch (error) {
console.log('상태 업데이트 오류', error);
}
};
▶ 데이터 변경 구간 : patch메소드로 db.json에 저장된 데이터 변경
끝.