[ React ] Redux Todo리스트 만들기

src/index.jsx

import App from './App';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import store from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>
);

src/App.jsx(react-router V6이상 문법)

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/index';
import ReduxPages from './pages/reduxPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/redux" element={<ReduxPages />} />
    </Routes>
  );
}

export default App;

src/pages/ReduxPages.jsx

import TodoFormContainer from '../container/todoFormContainer';
import TodoListContainer from '../container/todoListContainer';

const ReduxPages = () => {
  return (
    <div style={{ padding: '40px' }}>
      <TodoFormContainer />
      <TodoListContainer />
    </div>
  );
};

export default ReduxPages;

src/container/TodoFormContainer.jsx

import TodoForm from '../components/todos/todoForm';
import { useDispatch } from 'react-redux';
import { addTodo } from '../redux/actions';
import { useCallback } from 'react';

const TodoFormContainer = () => {
  const dispatch = useDispatch();
  const add = useCallback(
    (text) => {
      dispatch(addTodo(text));
    },
    [dispatch]
  );
  return <TodoForm add={add} />;
};

export default TodoFormContainer;

src/container/TodoListContainer.jsx

import { useSelector } from 'react-redux';
import TodoList from '../components/todos/todoList';

const TodoListContainer = () => {
  const todos = useSelector((state) => state.todos);
  return <TodoList todos={todos} />;
};
export default TodoListContainer;

src/components/TodoList.jsx

import React from 'react';

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((value, index) => {
        return <li key={index}>{value?.text}</li>;
      })}
    </ul>
  );
};

export default TodoList;

src/components/TodoForm.jsx

import React, { useRef } from 'react';

const TodoForm = ({ add }) => {
  const inputRef = useRef();
  const onClick = () => {
    add(inputRef?.current.value);
    inputRef.current.value = '';
  };
  const onKeyPress = ({ key }) => {
    if (key === 'Enter') {
      add(inputRef?.current.value);
      inputRef.current.value = '';
    }
  };
  return (
    <div>
      <input type="text" ref={inputRef} onKeyPress={onKeyPress} />
      <button onClick={onClick}>추가</button>
    </div>
  );
};

export default TodoForm;