Recoil과 React Query를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. Recoil은 상태 관리 라이브러리이며, React Query는 데이터 가져오기와 캐싱에 사용되는 라이브러리입니다.
npm install recoil react-query axios
// src/atoms.js
import { atom } from 'recoil';
export const todoListState = atom({
key: 'todoListState',
default: [],
});
Recoil을 사용하여 to-do 리스트를 표시하고 상태를 변경하는 React 컴포넌트를 작성합니다. 또한, React Query를 사용하여 데이터를 가져오는 커스텀 훅을 만듭니다.
// src/components/TodoList.js
import React, { useState } from 'react';
import { useRecoilState } from 'recoil';
import { todoListState } from '../atoms';
import { useQuery, useMutation, useQueryClient } from 'react-query';
import axios from 'axios';
const fetchTodos = async () => {
const response = await axios.get('/api/todos'); // Assuming you have an API endpoint for fetching todos
return response.data;
};
const createTodo = async (text) => {
const response = await axios.post('/api/todos', { text });
return response.data;
};
const TodoList = () => {
const [newTodo, setNewTodo] = useState('');
const [todos, setTodos] = useRecoilState(todoListState);
const queryClient = useQueryClient();
const { data } = useQuery('todos', fetchTodos, {
initialData: todos, // Use Recoil state as initial data
});
const addTodoMutation = useMutation(createTodo, {
onMutate: async (text) => {
// Optimistically add the new todo to the list
setTodos((prevTodos) => [
...prevTodos,
{
id: Date.now(),
text,
completed: false,
},
]);
// Cancel any outgoing refetches (to avoid duplicates)
await queryClient.cancelQueries('todos');
return text;
},
onError: (err, text, context) => {
// Rollback on error
setTodos(context.rollbackTodos);
},
onSettled: () => {
// Refetch the todos after mutation
queryClient.invalidateQueries('todos');
},
});
const handleAddTodo = () => {
if (newTodo.trim() === '') return;
addTodoMutation.mutate(newTodo);
setNewTodo('');
};
return (
<div>
<h1>Todo List</h1>
<div>
<input
type="text"
placeholder="할 일을 입력하세요"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
/>
<button onClick={handleAddTodo}>추가</button>
</div>
<ul>
{data.map((todo) => (
<li
key={todo.id}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
</li>
))}
</ul>
</div>
);
};
export default TodoList;
Recoil 스테이트와 React Query를 React 애플리케이션에 연결하고 TodoList 컴포넌트를 렌더링합니다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import TodoList from './components/TodoList';
const queryClient = new QueryClient();
ReactDOM.render(
<RecoilRoot>
<QueryClientProvider client={queryClient}>
<TodoList />
<ReactQueryDevtools />
</QueryClientProvider>
</RecoilRoot>,
document.getElementById('root')
);
이제 간단한 Recoil과 React Query를 사용한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링 및 서버와의 통합을 위해 API 엔드포인트를 수정하고 추가 기능을 구현할 수 있습니다.