AI 요약관련 정보

• 사용자 입력 컴포넌트를 구현하여 버튼 클릭 또는 Enter 키 입력으로 목록에 항목을 추가하는 React 코딩 면접 문제 풀이입니다. 📝
• 입력 유효성 검사를 통해 공백 또는 순수 공백 입력은 무시하며, 입력값이 비어있을 경우 제출 버튼을 비활성화합니다. 🚫
• 제출 시 입력값(공백 제거)을 목록에 추가하고, 입력 필드를 초기화하며, 버튼을 다시 비활성화하는 로직을 구현합니다. ✅
• useState 훅을 사용하여 입력 필드의 값(value)과 목록 항목(items)을 효율적으로 관리합니다. ⚛️
• input 태그를 value prop과 onChange 핸들러를 연결하여 제어 컴포넌트로 만듭니다. ✍️
• onClick (버튼) 및 onKeyDown (입력 필드) 이벤트를 활용하여 제출 로직을 트리거합니다. 🖱️
• onKeyDown 이벤트에서 e.key === 'Enter' 조건을 확인하여 Enter 키 입력을 감지하고 처리합니다. ⌨️
• handleSubmit 함수를 정의하여 버튼 클릭과 Enter 키 입력 모두에 동일한 제출 로직을 재사용합니다. 🔄
• setItems 시 이전 배열을 스프레드 연산자로 복사하여 새 배열을 생성함으로써 목록 업데이트의 불변성을 유지합니다. ✨
• 면접 시 key로 index를 사용하는 것이 비권장임을 언급하여 개발 지식 수준을 보여주는 것이 좋습니다. 💡