타입스크립트로 TodoList 만들기, 교훈 : id는 고유할 뿐만 아니라 어디에도 의존되면 안된다.

레포지토리는 여기

기능

• CRUD
• 완료된 항목과 미완료된 항목을 분리

추가해야하는 기능

• 항목의 id를 text로 했기 때문에 중복방지 기능을 추가해야한다.

겪었던 문제 : id가 배열에 의존되다보니, 항목을 수정,삭제했을때 엉뚱한 항목에 적용됨.

항목들을 CUD할 때, 항목들을 추적하는 방법으로 고유한 id를 이용했다.

  { id: 0, text: "강아지 산책", complete: true },
  { id: 1, text: "코딩연습", complete: false },
  { id: 2, text: "친구랑 놀러가기", complete: false },

그리고 저 id는 항목이 추가될때마다 배열의 크기+1 로 설정하였다.

const addNewTodo = (newTodo: string) => {
    const newTodoList = {
      id: todos.length + 1,
      text: newTodo,
      complete: false,
    };
    setTodos([...todos, newTodoList]);

  };

다 만들고 시험을 해보니 두번째 항목을 수정했는데 전혀 다른 엉뚱한 항목이 수정되었다.

문제 원인은 id가 배열의 크기에 의존되다보니 실제 id 순서와 화면에 보이는 항목의 순서가 일치하지 않는 것이었다.

 

심지어 id가 고유하지도 않았다. 

 

해결책은 id를 어디에도 의존되게 하면 안되고 무조건 독립되도록 해야한다는 것이다.

 

id를 고유하고 독립적이게 만들기 위해 많은 별짓을 다 해보고 내린 결론은, 'mysql에서 자동생성되는 id값을 이용해야 한다.' 인데

 

데이터베이스 세팅하기 귀찮아서 그냥 text를 고유 id로 하였다.

 

고민한 시간에 비해 허무했다.

..(생략)..
   const newTodoList = {
      id: todos.length + 1,//이건 작성은 했지만 사용되지 않는 값이다..
      text: newTodo,
      complete: false,
    };
    
..(생략)..  왜 띄어쓰기가 이렇게 많이 생기는진 모르겠다. 티스토리 에디터..

                    <EditTodoBtn
                      onClick={() => {
                      //id를 text로 설정했다
                        setEditTodoId(todo.text);
                        setEditModalHandler(true);
                      }}
                    />

이렇게 해주니 잘 작동은 했지만 찜찜하다.

text를 id로 하기위해 중복방지 기능을 추가해야 하지만, 귀찮아서 하진 않았다..

 

여튼 알게된 것은

항목의 id는 무조건 독립적이고 고유해야 한다.

이를 위해 가능하면 서버에서 전해주는 data_id를 사용하자.(데이터베이스에서 생성된 id)