Today

1. 타임어택

계산기(20분) : 실패

내가 작성한 코드

  const addHandler = (event) => {
    console.log("작동 여부");
    setResult([...(result + number)]);
  };

  const subtractHandler = (event) => {
    console.log("작동 여부");
    setResult([...(result - number)]);
  };

결과값이 이상하게 나타난다.
뭔가 이상하다..

Trouble Shooting 1
todolist를 작성하던게 습관이 되었는지 자연스럽게 배열을 적어버렸다.

해결

  const addHandler = (event) => {
    console.log("작동 여부");
    setResult(result + +number);
  };

  const subtractHandler = (event) => {
    console.log("작동 여부");
    setResult(result - +number);
  };

todolist(40분) : 실패

Trouble Shooting 1

• onClick을 실행하기 위해 함수를 넣어야 하나, 함수를 바로 호출해버림 : 누르기도 전에 함수를 호출 => 무한루프
• 또한, removeTodo(el.id)의 리턴값을 찾아보면undefined가 나옴

<button onClick={removeTodo(el.id)}>삭제</button>

해결
removeTodo를 넣으면 인자를 받아올 수 없기 때문에
() => removeTodo(el.id) 처럼 화살표 함수를 넣어 인자를 받아 올 수 있게 설정.

<button onClick={() => removeTodo(el.id)}>삭제</button>

Trouble Shooting 2

• 아래 식에서 console.log를 보면 todos와 prev가 다름..

const removeTodo = (id) => {
    setTodos((prev)=>
        console.log(prev, todos)
		todos.filter((el2) => el2.id !== id));
  };

해결

• useState 훅에서 set 함수는 이전 상태(prev)를 인자로 받음!!
  즉, 이전 상태를 참조하는 콜백 함수를 사용 =>
  1. 이전 상태 prev를 참조하여 새로운 배열을 생성
  2. React가 상태 업데이트를 안전하게 처리
  3. 코드의 의도가 더 명확

  const removeTodo = (id) => {
     setTodos((prev) => prev.filter((el2) => el2.id !== id));
   };

---

Learn

지금까지 과제를 해결하면서 해설 영상 등을 보면서 틀린 그림 찾기 하는 느낌을 받았는데, 이번 타임 어택을 하면서
내가 무엇을 모르는지 정확히 다시 파악 할 수 있었다.

어떻게 쓰이는지 명확하게 알고 작성 할 수 있도록 노력하자

---

주절주절

없음!