[TIL 2023.06.14] React로 Todo list 만들어 보기

❓발생한 이슈/고민

CRA 설치 후 나만의 투두리스트를 만들어 보았다.

 

[1] 완료 <-> 취소 간 상호이동

working 항목의 완료 버튼을 클릭 하면 done 으로 내려오게 하고 싶다.

done 항목의 취소를 누르면 다시 working쪽으로..

---

[2] id 값의 중복

삭제를 누르면 해당 항목이 아닌 다른 항목이 삭제되고,

또 여러개가 갑자기 중복되어 생성되거나 삭제 버튼을 눌러도 삭제가 되지 않는 이슈 발생

삭제되고 생성되면서 id값의 중복으로 인한 문제였다.

---

[3] input validation

input에 값이 없는 경우 submit이 되지 않도록 validation 적용이 필요

 

💡해결과정

[1] 완료 <-> 취소 간 상호이동

//투두 완료&취소 버튼 함수
const todoUpdateClickBtn = () => {
  // isDone 값을 변경 해준다면!?
  const updatedTodos = todos.map((item) => {
    if (item.id) {
      item.isDone = !item.isDone;
    }
    return item;
  });

  setTodos(updatedTodos);
}

처음에 map 메서드를 이용해서 객체 내부의 isDone 값이 true라면 false로 false라면 true로

반대로 바꿔주는 조건을 달아주었다.

그러나 선택한 항목의 true/false 값이 바뀌는게 아니라 전체가 같이 바뀌어 버리는것!

식별자....식별자가 필요하다

<button
  className="update-btn"
  onClick={() => todoUpdateClickBtn(item.id)}
>
  완료
</button>

마크업쪽에서 id를 매개변수로 받아온 뒤

const todoUpdateClickBtn = (id) => {
  // isDone 값을 변경 해준다면!?
  const updatedTodos = todos.filter((item) => {
    if (item.id === id) {
      item.isDone = !item.isDone;
    }
    return item;
  });

  setTodos(updatedTodos);
};

조건을 수정해주었다. 해결~

---

[2] id 값의 중복

const newTodos = {
      id: todos.length+1,
      title,
      contents,
      isDone: false,
    };

id값을 배열길이의 +1로 두니까 문제가 배열의 인덱스가 10이라고 가정했을때

5의 항목을 삭제하면 총 인덱스는 9로 바뀌고

이 때 새로운 카드를 생성하면 id가 10인 항목이 생성되는데 그러면 이 배열 안에 id가 10인 항목은 2개가 되는 것이다.

그래서 삭제하고 완료 취소를 반복하다보면 어느새 난리가 나는 문제가 발생한다. 

삭제를 하던 완료를 하던 취소를 하던 상관없이 항상 개별적인 id를 가지게 하려면 어떻게 해야할까 고민하다가

새로운 state를 만들기로 했다.

const [number, setNumber] = useState(0);

새로운 스테이트 선언 후 

setNumber((prev) => prev + 1);

set을 해주면 매 생성시 마다 새로운 아이디가 생성되겠지

예스예스

---

[3] input validation

 

input에 값이 입력되지 않아도 추가하기 버튼을 누르면 새로운 요소가 생성되는 것을 방지하기 위해 

조건문을 추가해 주었다.

스테이트로 이 모든 것이 렌더링 되고 있으니까..

if (title === '' || contents === '') return;

공란이라면 아무것도 리턴되지 않도록~

 

🧐궁금점과 부족한 내용

[2] id 값의 중복같은 경우에는 오류가 날 거라고는 전혀 예상도 못 하고 있다가 다른분이 "아마 이상하게 될걸요"

라고 말해줘서 알게된 부분이다. 

 

어떻게 이런 오류들이 생길 것을 미리 대비하고 수정할 수 있을까. 수정하라고 알려줬던 사람에게 물어보니

하나하나 console.log 찍어가면서 확인해가면서 코드를 작성해서 그렇다고 하는데 원래 그러는건가??

어떻게 매번 하나하나 다 찍어보지.. 내가 여태까지 잘 못 하고 있었던 것인가...!  

 

📋레퍼런스

http://ejihong.egloos.com/v/9930644