WIL 23.06.18 [개인프로젝트] TO DO LIST

TO DO LIST 개인프로젝트를 마치면서 그동안 배웠던 것 중에 기억해야 할 것을 적어보려고 한다.

 

Title, Note 에 각각 값을 입력하여 WorkingList 에 추가할 수 있고, 추가 된 값은 완료를 눌러 DoneList 로 옮기거나 옮겨진 값을 취소를 눌러 불러올 수 있으며 x를 클릭하여 값을 삭제할 수 있다.

 

문제점

1. 기존의  아이디 값이 정해져 있어서 완료를 눌렀을 시에, 그 id 값의 우선순위에 따라서 DoneList 에서 차례대로 값이 쌓이는게 아닌, 값이 id 값 순서대로 쌓였음. 예를들어, 위의 '수학 (id : 1)' 에 확인버튼을 누르면 '과학 (id : 4)'밑으로 쌓이는 게 아닌, 수학의 id 값인 1에 의해 영어(id : 3)의 위로 값이 이동함. 큰 문제는 아니지만 불편했음.

 

2. 컴포넌트화 할때 중복되는 부분에 대해서 한꺼번에 같이 처리하는 방식에 대해 몰라서 불필요하게 컴포넌트를 여러번 만듬.

 

시도해본 것

 

원래는 아래와 같은 방식으로 코드를 작동시켰는데, 이렇게 되면 그 값이 id에 따라서 위치하였음.

또한 이런식으로 작성하면 거의 똑같은데도 불구하고 함수를 doneList, workingList 두번이나 사용해야 함.

  // doneList 로 이동
  const doneList = (id) => {
    setList((updatedList) =>
      updatedList.map((value) => ({
        ...value,
        isDone: value.id === id ? true : value.isDone, // value.id가 id 와 일치하면 true, 아니라면 기존의 값으로 유지
      }))
    ); // 그 값을 setList 로 입력
  };

  //workingList 로 이동
  const workingList = (id) => {
    setList((updatedList) =>
      updatedList.map((value) => ({
        ...value,
        isDone: value.id === id ? false : value.isDone,
      }))
    );
  };

 

그래서 기존의 값을 삭제하고 그 값을 복사하여 리스트에 추가하는 방식으로 작성하였음.

그런데 이렇게 작성하면 list (기존에 삭제되기 전의 리스트) 에 추가되어 결과적으로 값이 복사와 이동은 되나 기존의 값이 삭제되지 않아서, workingList 와 doneList 둘다 그 값이 보이게 됨.  

// doneList 로 이동
  const doneList = (id, title, detail) => {
    deleteList(id);
    const newDoneList = {
      id: list.length + 1,
      title,
      detail,
      isDone: true,
    };
    setList([...list, newDoneList]);
  };

  // workingList 로 이동
  const workingList = (id, title, detail) => {
    deleteList(id);
    const newWorkingList = {
      id: list.length + 1,
      title,
      detail,
      isDone: false,
    };
    setList([...list, newWorkingList]);
  };

 

해결방법

 

코드는 삼항연산자를 이용하여 하나로 간결하게 줄이고 updatedList 에서 기존 값이 삭제된 리스트를 가져와서 그 값에 추가를 하니, 원하는 대로 작동하였음.

  //doneList, workingList 로 이동
  const moveList = (id, title, note, isDone) => {
    const updatedList = deleteList(id);
    const newDoneList = {
      id: updatedList.length + 1,
      title: title,
      note: note,
      isDone: isDone ? false : true,
    };
    setList([...updatedList, newDoneList]);
  };

 

컴포넌트화 할때도 이처럼 하나의 컴포넌트에서 삼항연산자로 다 같이 작성할 수 있어서 매우 편리함.

const ToDos = ({ value, deleteList, moveList, checkId }) => {
  return (
    <li key={value.id} className="listStyle">
      <h3 className="titleStyle">{value.title}</h3>
      <p className="noteStyle">{value.note}</p>
      <button onClick={() => deleteList(value.id)} className="btnStyle">
        X
      </button>
      <button
        onClick={() =>
          moveList(value.id, value.title, value.note, value.isDone)
        }
        className="btnStyle"
      >
        {value.isDone ? "취소" : "완료"}
      </button>
      {/* <button onClick={() => checkId(value.id)}>아이디</button> */}
    </li>
  );
};

export default ToDos;

 

알게된것

 

기존에 삼항연산자는 알고리즘 풀때는 활용했으나, 어떤식으로 활용할 수 있는지에 대한 지식이 부족한 상태였다. 위처럼 삼항연산자를 이용하면 최대한 간결하게 코드를 작성할 수 있으며, 최대한 간결하고 깔끔하게 코드를 작성하도록 노력해야겠다. 또한 외부 함수에서 리턴값을 가지고 와서 다른 함수에서 활용하는 방법에 대해서도 배울 수 있어서 의미 있던 시간이었다.