[Toy Projects] 'TODOoO' project (5)

삭제 기능을 만들기 전에, 추가 입력 폼에서와 마찬가지로 수정에서도 입력 폼이 여러 개가 열려 있는 경우가 생겼다.

 

ex.1 ) 같은 카테고리 내에서 추가와 수정 폼이 같이 열릴 수 있음

 

ex.2 ) 다른 카테고리에서 여러 수정 폼이 열릴 수 있음

 

한 번에 하나만 열릴 수 있도록 하고 싶어서 추가 입력 폼에 제한을 뒀던 것처럼 제한을 뒀다.

 

우선 ex.1을 해결하기 위해서

1. isAdd가 true (추가 입력 폼이 열렸을 경우) 일 때, isUpdate를 -1로 변경해 주었다. → 추가 입력 폼을 연 경우 수정 입력 폼을 없애기
2. isUpdate가 -1이 아닐 때 (수정 입력 폼이 열렸을 경우) isAdd를 false로 변경해 주었다. → 수정 입력 폼을 연 경우 추가 입력 폼을 없애기

// component/Category.js

  useEffect(()=>{
    isAdd && setIsOpen(category);
    isAdd && setIsUpdate(-1);
  }, [isAdd]);

  useEffect(()=>{
    isUpdate !== -1 && setIsAdd(false);
  },[isUpdate])

 

그다음으로는 ex. 2인데, 이 경우는 전에 쓴 isOpen을 같이 사용하기로 했다.

 

즉, 지금 같은 카테고리 내에서 수정 입력 폼은 한 개만 열릴 수 있다. 다만 문제는 다른 카테고리와의 중복이기 때문에, isOpen으로 카테고리를 구별하여 사용할 수 있다.

그래서 수정 입력 폼을 열었을 때도 isOpen에 해당 카테고리 명을 대입했으며, isOpen에 다른 카테고리 명이 있으면 입력 폼을 없애주었다.

// component/Category.js

  useEffect(()=>{
    // 현재 열린 카테고리가 지금의 카테고리가 아닌 경우에
    // 만약 isAdd가 true이거나, isUpdate가 -1이 아니면
    // 다 초기화시켜주기
    if(isOpen !== '' && isOpen !== category && (isAdd || isUpdate !== -1)) {
      setIsAdd(false);
      setIsUpdate(-1);
    }
  },[isOpen]);

  useEffect(()=>{
    isAdd && setIsOpen(category);
    isAdd && setIsUpdate(-1);
  }, [isAdd]);

  useEffect(()=>{
    isUpdate !== -1 && setIsAdd(false);
    // isUpdate가 -1이 아니면 isOpen에 지금의 카테고리 명을 대입
    isUpdate !== -1 && setIsOpen(category);
  },[isUpdate])

 

이렇게 해서 입력 폼의 중복 열림을 막아주었다.

다음은 Category.js의 전체 코드이다.

// component/Category.js

import { useState, useEffect } from 'react';
import Form from './Form';

function Category(props) {
  const { category, todo, onCreate, onUpdate, isOpen, setIsOpen } = props;
  const [isAdd, setIsAdd] = useState(false);
  const [todoForm, setTodoForm] = useState([]);
  const [isUpdate, setIsUpdate] = useState(-1);

  useEffect(()=>{
    if(isOpen !== '' && isOpen !== category && (isAdd || isUpdate !== -1)) {
      setIsAdd(false);
      setIsUpdate(-1);
    }
  },[isOpen]);

  useEffect(()=>{
    isAdd && setIsOpen(category);
    isAdd && setIsUpdate(-1);
  }, [isAdd]);

  useEffect(()=>{
    isUpdate !== -1 && setIsAdd(false);
    isUpdate !== -1 && setIsOpen(category);
  },[isUpdate])

  useEffect(()=>{
    let _form = [];
    for(let i = 0; i < todo.length; i++){
      _form.push(
        <div key={i}>
              <p>{todo[i].desc}</p>
              { isUpdate === i ? 
                <p onClick={()=>{setIsUpdate(-1)}}>×</p> 
                :
                <p onClick={()=>{setIsUpdate(i)}}>✎</p>
              }
              <p>🗑</p>
          { isUpdate === i ? 
            <Form
              type={2}
              setForm={setIsUpdate}
              onWrite={(data)=>{
                onUpdate(todo[i].id, data);
              }}
              data={todo[i].desc}></Form>
            :
            null
          }
        </div>
      )
    }
    setTodoForm(_form);
  },[todo, isUpdate])

  return (
    <div className="category">
        <div></div>
        <p>{category}</p>
        <p onClick={() => {setIsAdd(!isAdd)}}>{ isAdd ? '×' : '+' }</p>
        <div>{todoForm}</div>
        {isAdd ? <Form type={1} setForm={setIsAdd} onWrite={(data)=>{onCreate(data)}} data={null}></Form> : null}
    </div>
  );
}

export default Category;

 

결과화면

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)