recoil, react-query todoList - chatGPT

Recoil과 React Query를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. Recoil은 상태 관리 라이브러리이며, React Query는 데이터 가져오기와 캐싱에 사용되는 라이브러리입니다.

1. 먼저, Recoil과 React Query를 설치합니다.

npm install recoil react-query axios

2. Recoil 스테이트를 설정합니다.

// src/atoms.js

import { atom } from 'recoil';

export const todoListState = atom({
  key: 'todoListState',
  default: [],
});

3. React 컴포넌트를 작성합니다.

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;

4. 애플리케이션의 진입점을 설정합니다.

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 엔드포인트를 수정하고 추가 기능을 구현할 수 있습니다.