[2일차] 김태훈 과제 제출합니다.

[ketarubot]

No description provided.

[winshine0326]

// 원래 코드
  useEffect(() => {
    setCount(0);
    for (const todo of todos) {
      if (todo.complete === true) setCount(count+1);
    }
  }, [todos]);

map을 쓰지 않고 for ... of를 쓰신거 정말 잘하셨습니다! 어떻게 두 개의 차이점을 벌써 알고계신거죠?? 대단합니다.
하지만 setCount를 여러번 호출하는건 비효율적입니다. 다음과 같이 한 번만 계산해서 setCount 하는 방식을 권장 드립니다.

// 수정 코드(한번만 계산)
useEffect(() => {
  const completedCount = todos.filter(todo => todo.complete).length;
  setCount(completedCount);
}, [todos]);

(App.jsx에서 filter를 쓰셔서 말하는거에요! filter를 사용하실 줄 아는 당신은 javascript 고수)

[winshine0326]

input을 useRef로 관리 하는 방식도 괜찮습니다.
하지만 조금 더 react스러운 방식은 state로 선언 후 input에 onChange 핸들러를 달아 setState로 관리 하는 것입니다.

const [inputValue, setInputValue] = useState('');

이런 state 하나를 만들어서 관리하는 것이 어떨까요?

요구사항 때문에 어쩔 수 없었던 건 알지만, 실제로 코드를 짜실 때는 해당 방식(useState)으로 사용하시길 권장드립니다.
(validation이 필요한 상황에서 useRef는 압도적으로 불리합니다.)