✅ React 기초 강좌

✅ 과제1: CRUD 중 하나의 기능을 구현하고 주석으로 설명하기

제가 여기서는 Update 기능(= 완료 상태 토글)을 선택해서,

함수 내부를 하나하나 주석으로 설명해드리겠습니다.

📄 완료 상태 토글 함수 (handleToggle)

const handleToggle = (id) => {
  // 1. 기존 todos 배열을 map으로 순회하면서
  setTodos(
    todos.map((todo) =>
      // 2. 현재 순회 중인 todo의 id가 인자로 받은 id와 같으면
      todo.id === id
        // 3. isDone 상태를 반전시킨 새로운 객체를 반환 (true <-> false)
        ? { ...todo, isDone: !todo.isDone }
        // 4. 그렇지 않으면 기존 객체 그대로 유지
        : todo
    )
  );
};

🔍 핵심 요약

💡 보너스 과제 (선택)

완료된 항목만 삭제하기도 도전해볼 수 있습니다:

const handleDeleteDone = () => {
  // 완료된 항목만 걸러내서 삭제
  setTodos(todos.filter(todo => !todo.isDone));
};

✅ 과제2: CRUD 중 하나의 기능을 구현하고 주석으로 설명하기

📍 목표

• 입력창에 아무것도 입력하지 않거나, 공백만 입력된 경우에는 추가 버튼을 비활성화
• 사용자 경험(UX) 향상: 실수로 빈 할 일을 추가하지 않도록 방지

📄 적용 위치: TodoForm.jsx

import { useTodoContext } from '../context/TodoContext';

function TodoForm() {
  const { text, setText, handleAdd } = useTodoContext();

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') handleAdd();
  };

  // ✅ 입력값에서 공백 제거 후 비었는지 확인
  const isDisabled = text.trim() === '';

  return (
    <div style={{ marginBottom: '20px' }}>
      <input type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="할 일을 입력하세요"
      />
      {/* ✅ 조건부 disabled 속성 적용 */}
      <button onClick={handleAdd} disabled={isDisabled}>
        추가
      </button>
    </div>
  );
}

export default TodoForm;

✅ 요약

🧪 사용 예

.

GitHub - heroyooi/react-app at ch5_6