[React] 16. 리덕스로 TodoList구현하기 03

 

2020/12/08 - [React] - [React] 14. 리덕스로 TodoList구현하기 01

2020/12/08 - [React] - [React] 15. 리덕스로 TodoList구현하기 02

 

TodoList 수정하기 기능 구현

저는 input에 readOnly속성과 onBlur 함수를 사용하여 TodoList의 수정 기능을 구현하였습니다.!

연필 모양의 버튼을 클릭하면 텍스트가 수정될 수 있도록 readOnly의 값을 false로 변경하고, <TextBox>의 내용이 변경될 수 있게 합니다. onBlur 함수를 사용하여 <TextBox>의 포커스가 사라지면 변경된 텍스트 값을 dispatch(todoUpdate(id, updateText))를 사용하여 스토어에 반영해주었습니다.

import React, { useCallback, useState } from "react";
import {
  Button,
  CheckBox,
  TextBox,
  TodoItemBox,
} from "../Styled/todoItem-styled";
import { useDispatch } from "react-redux";
import { todoRemove, todoToggle, todoUpdate } from "../Reducer/Todo";
import { FaRegSquare, FaRegCheckSquare } from "react-icons/fa";
import { TiDeleteOutline } from "react-icons/ti";
import { BiPencil } from "react-icons/bi";
const TodoItem = ({ todo }) => {
  const { id, text, isCompleted } = todo;
  const [readOnly, setReadOnly] = useState(true);
  const [updateText, setUpdateText] = useState(text);
  const dispatch = useDispatch();

  const onChangeText = useCallback(
    (e) => {
      const { value } = e.target;
      setUpdateText(value);
    },
    [updateText]
  );

  const updateTodo = () => {
    if (!isCompleted) {
      setReadOnly(false);
    }
  };

  return (
  
  // 체크 박스
    <TodoItemBox>
      <CheckBox onClick={() => dispatch(todoToggle(id))}>
        {isCompleted ? (
          <FaRegCheckSquare size="25px" color="#84a98c" />
        ) : (
          <FaRegSquare size="25px" />
        )}
      </CheckBox>
      
  // 인풋(텍스트)   
      <TextBox
        name="text"
        readOnly={readOnly}
        defaultValue={text}
        checked={isCompleted}
        onChange={onChangeText}
        onBlur={() => dispatch(todoUpdate(id, updateText))}
      />

  // 수정 버튼
      {!isCompleted ? (
        <Button onClick={updateTodo}>
          <BiPencil size="25px" color="#a5a58d" />
        </Button>
      ) : (
        <></>
      )}
  
  // 삭제 버튼
      <Button onClick={() => dispatch(todoRemove(id))}>
        <TiDeleteOutline size="30px" color="#e56b6f" />
      </Button>
    </TodoItemBox>
  );
};

export default TodoItem;