Today I Learned 2023.02.27. [React 프로젝트 1]

Dongchan Alex Kim·2023년 2월 27일

Today I Learned

목록 보기

14/31

문제상황

const clickWorkingfalseChanger = (id) => {
        let newTodo = todo.map((item) => {item.id == id ? item.isDone = 'true' : item}
        });
        setTodo(newTodo)
    }

삼항연산자를 통해 isDone 값을 변경해주었는데
뭐가 문제인지 계속 반환값이 객체 자체를 지워버리고, 'true'값만 나오는 것이었다.
ㅠㅠ

시도한 것들

const clickWorkingfalseChanger = (id) => {
        setTodo(todo[id-1].isDone = true)
    }

이 방식으로 setTodo에 접근하는 건 불가능했다.
setTodo에 접근할 때에는 새로운 배열을 만들어내는 내장함수를 이용해 반환시켜야겠다는 걸 알았다.

const clickWorkingfalseChanger = (id,isDone) => {
        let newTodo = todo.map((item) => {item.id == id ? item.isDone = !isDone : item}
        });
        setTodo(newTodo)
    }

isDone값을 따로 받아와서 변경해보려했지만, 이것도 왜인지 모르게 계속 props를 받아오질 못하고 있었다.
이 부분은 내일 예상기 매니저님께 한번 좀 여쭤봐야할 꺼 같다.

해결

const clickWorkingfalseChanger = (id) => {
        let newTodo = todo.map((item) => {
          if(item.id == id){
            item.isDone = 'true'
            return item
          }else{
            return item}
        });
        setTodo(newTodo)
    }

삼항연산자로 하면 결국 계산된 그 값이 반환된다는 것이었다.
너무 짧게만 쓰려고 하지말고,
상황에 맞춰서 if문도 써야한다는 점을 꼭 기억하자.

문제상황2

문제가 키값이 계속 꼬인다는 것이었다.
새로 추가한 객체의 key 값을 계속 todo.length + 1 이런식으로 주다보니까,
중간에 뭐 하나 삭제해버리면 length 길이가 줄어버리고,
이 때문에 key값이 중복되는 현상이 일어났다.

시도한 것

사실 객체를 생성해 낼 때마다, 객체의 id값을 초기화 시키는 방식을 해볼까에 대해서 생각을 했다.
submit 버튼을 누를 때마다 todo 배열을 돌면서 id 값을 다시 재정의하는 방식말이다.

해결

사실 너무 쉽게 해결했다.
그런 복잡한 함수보다는 그냥,
객체가 새로 만들어질 때 애초에 key값을 난수로 줘버렸다.

const clickAddButtonHandler = () => {
        const newTodo = {
            id: Math.random(), //****(요부분)
            title,
            content,
            isDone: 'false'
        };
        setTodo([...todo, newTodo])
    }