To Do List(3)

1. 코드 외워치기

이제는 완성된 코드를 보지 않고도 똑같이 만들 수 있게 외웠다.
시간이 꽤 오래 걸렸지만 외워서 치다 보니 코드를 하나씩 이해하게 됐다.
그리고 형태도 변형이 가능했다. 이번에 변형한 형태는
목표만 input 했는데, 제목 input을 추가하고, 제목을 입력하지 않았을 때, 목표를 입력하지 않았을 때 각각 알럿창으로 알려주는 기능을 추가했다.(다음에는 알럿으로 알려주며 해당 input으로 포커싱 되게하는 방법을 공부할 예정) 그리고 함수의 동작원리를 완벽하게 이해하게 됐다.

2. 이해한 코드

처음에는 따라 쳐서 몰랐지만 반복해서 치다 보니 의문이 생기는 부분이 있었다.
아직 자바스크립트를 완벽히 이해하지 못해서 생긴 부분인데 확인 해보자.

setTodos((prev) => [...prev, { todo, todo2, isDone: false, id: uuid() }]);

return { ...t, isDone: false };

위의 두 가지 경우가 헷갈렸다.
다음은 배열에
{todo, todo2, isDone: false, id: uuid()}를 추가하는 작업이고,
아래는 전개 구문에
isDone : false로 변경하는 작업이다.

의문점!!

[ ...prev, {} ] 이건 더하는건데 왜 { ...t, isDone:false} 이건 변경이지??
뒤의 경우도 더해져야 하는 것 아닌가?

배운점!!

하나씩 알아보자

먼저,
[ ...prev, {} ]의 경우 배열은 각각의 index가 0,1,2,... 이런식으로 정해져 있다. 그래서 같은 객체나 요소가 있으나 없으나 전개 구문 후 , 다음은 더해지는게 맞다.

그렇다면 { ...t, isDone:false} 이 경우는?
배열 형태가 아니기 때문에 두 가지 경우가 생긴다.
t라는 객체에 isDone이 포함되지 않았다면 isDone:false이 추가가 되고,
isDone이 포함되어 있다면 벨류가 false로 바뀌게 된다.

예시를 보면 이해가 쉽다.

//(예시)
const obj = { name: 'Kim', age: '30', flag: 'true', foo: 'bar' };
const newObj = { ...obj, name: 'Park' };
// newObj { name: 'Park', age: '30', flag: 'true', foo: 'bar' }

console.log(obj === newObj); // false

3. 느낀점

처음에는 "외워서 친다고 이해가 될까?", "이해를 먼저 하는게 좋지 않을까?" 라는생각을 많이했다.

하지만 외워서 치다 보니 모르는 부분이 더 뚜렷하게 구분됐고, 그러다보니 디테일하게 공부를 할 수 있었다. 결과적으로 코드도 이해하게 됐다.
그러다보니 자연스럽게 조금씩 변형도 가능해졌다.
물론 아직 비슷한 원리로 새로운 것을 구현하기에는 무리가 많지만, 내가 원하는 조금씩 수정이 가능하다는 것이 너무 뿌듯했다.
여기서 만족하지 말고 더 발전하자.

---

과제 오류 잡기

유튜브 영상 오류 잡기

        <TodoList name="working" todos={todos} setTodos={setTodos} />
        <TodoList name="working" todos={todos} setTodos={setTodos} />

바보같이 working만 두개썼네요... 밑에꺼 done으로 바꾸니 잘 실행됩니다....