[React-project Todo-app]일정 수정하기 수정할 수 있는 input 만들기 input에 저장된 값을 이용하여 일정 수정하기

지난 포스팅에서 일정을 수정하기 위해 일정 자세히 보기 모달창을 만들었다.

 

이제 수정버튼을 누르면 수정이 가능하도록 기능을 구현하겠다.

 

 

먼저 수정버튼을 누르면 수정을 할 수 있는 input을 만든다.

 

 

useState

const [modalContentUpd, setModalContentUpd] = useState(false); // 모달창에서 수정을 위한 input을 보여줄지 말지 결정하는 값
const [modalTitleInput, setModalTitleInput] = useState(""); // 타이틀 인풋
const [modalContentInput, setModalContentInput] = useState(""); // 컨탠츠 인풋

 

 

html

{modalContentUpd === false ? (
          <div className="modal_text_box">
            <p className="modal_title">{modalTitle}</p>
            <p className="modal_content">{modalContent}</p>
          </div>
        ) : (
          <div className="modal_text_box">
            <input
              className="modal_title"
              placeholder={modalTitle}
              type="text"
              onChange={modalTitleInputHaedler}
            />
            <textarea
              className="modal_content"
              placeholder={modalContent}
              cols="41"
              rows="20"
              onChange={modlaContentInputHaedler}
            ></textarea>
          </div>
        )}

 

모달의 제목과 내용을 출력하는 텍스트와 제목,내용을 수정하는 input테그를 만들고 

삼항연산자를 통해 수정버튼이 눌리면 modalContentUpd이 true가 되면서 수정하는 input이 보여지고 수정이 완료되면 

modalContentUpd가 false가 되면서 수정완료된 제목과 내용이 출력된다.

 

 

modalContentUpd가 false일때 수정버튼이, modalContentUpd가 true일따 수정 완료 버튼이 보이도록 하였다.

{modalContentUpd === false ? (
            <Button  updateBtnEvent={updateBtnEvent}>
              수정
            </Button>
          ) : (
            <Button updateCommitBtnEvent={updateCommitBtnEvent}>수정완료</Button>
          )}

 

수정 전

 

 

수정 후

 

 

js

수정버튼 클릭시

/**
   * 모달창에서 수정input을 활성화하는 버튼
   */
  const updateBtnEvent = () => {
    setModalContentUpd(true);
  };

 

modalContentUpd가 true면 수정하는 input이 보여지기 때문에 수정 버튼을 클릭하면 setModalContentUpd을 이용하여 false로 설정된 초기값을 true로 변경하였다.

 

일정을 수정하고 수정완료버튼을 클릭시

/**
   * 모달창에서 수정input을 비활성화하고 수정을 완료하는 버튼
   */
  const updateCommitBtnEvent = () => {
    setModalContentUpd(false);

    let listMap = todoList.map((item) => {
      return item.id === modalId
        ? { ...item, title: modalTitleInput, content: modalContentInput }
        : item;
    });
    let listFil = listMap.filter((item) => {
      return item.id === modalId;
    });

    setModalTitle(listFil[0].title);
    setModalContent(listFil[0].content);
    setTodoList([...listMap]);
    setModalTitleInput("");
    setModalContentInput("");
  };

 

먼저 수정하는 input이 사라져야 하기에 modalContentUpd를 false로 변경하고

map 함수를 이용하여 todoList의 id와 미리 모달창을 띄울 때 저장했던 id값을 삼항연산자로 비교하여 true면 수정한 제목과 수정한 내용을 변경하고 false면 원래 todoList를 리턴하도록 하였다.

 

그리고 다시 수정한 값을 모달창에 출력하게 위해 filter를 사용하여 map으로 가공한 todoList중에 변경한 리스트만 listFil변수에 담아서 setModalTitle와 setModalContent를 통해 모달창에 수정된 값을 출력하게 하였다.

 

(근데 지금 생각해 보니까 그냥setModalTitle()와 setModalContent()에 modalTitleInput과 modalContentInput로 변경하면 되는데 굳이 filter를 써서 코드만 길어졋다;;;)

 

그리고 수정된 todoList를 setTodoList를 사용하여 변경하였고 수정하는 input의 값인 modalTitleInput과 modalTitleInput의 값을 초기화 시켜 주었다.

 

닫기 버튼

  /**
   * 모달창 닫기 버튼
   */
  const modalClosetBtnEvent = () => {
    setModalRead(false);
  };

 

setModalRead를 false로 변경하여 모달창을 닫는다.