AI 요약관련 정보

• React To-Do List 구현 요구사항: 사용자 입력 텍스트를 로컬 컴포넌트 상태로 관리하며, 추가/삭제 기능을 포함하고, data-test-id 속성을 사용하여 테스트 용이성을 확보해야 합니다. 📝
• 제어 컴포넌트(Controlled Component) 구현: useState 훅을 사용하여 입력 필드의 text 상태를 관리하고, value 및 onChange 속성을 통해 입력 값을 제어합니다. ✍️
• 불변성(Immutability) 유지: To-Do 항목을 추가하거나 제거할 때 기존 배열을 직접 수정하는 대신, 스프레드 연산자(...)나 filter 메서드를 사용하여 항상 새로운 배열을 생성하고 상태를 업데이트합니다. 🔄
• To-Do 항목 추가 로직: 입력된 텍스트의 공백을 제거(trim())하고, 빈 문자열은 추가되지 않도록 유효성 검사를 수행하며, 추가 후에는 입력 필드를 초기화합니다. ✅
• To-Do 항목 렌더링 및 key 속성: todos 배열을 map 메서드로 순회하여 각 항목을 <li> 태그로 렌더링하며, 성능 최적화 및 식별을 위해 key 속성(여기서는 index 사용, 실제 프로덕션에서는 고유 ID 권장)을 부여합니다. 🔑
• To-Do 항목 제거 로직: filter 메서드를 사용하여 특정 index에 해당하는 항목을 제외한 새로운 배열을 생성함으로써 불변성을 유지하며 항목을 삭제합니다. 🗑️
• 핵심 역량 평가: 이 문제는 React의 useState를 활용한 상태 관리, 리스트 렌더링 시 key의 중요성, 그리고 불변성을 유지하는 데이터 업데이트 방식 등 프론트엔드 개발의 기본적이면서도 중요한 개념들을 평가하는 데 사용됩니다. 🧠