AI 요약관련 정보

• 마스터-디테일 뷰 React 코딩 질문 해결 과정을 다루며, 사용자 검색 및 선택된 사람의 세부 정보 표시를 위한 두 개의 패널 인터페이스를 구축합니다. 🔍
• data/people.js 파일의 배열 데이터를 사용하며, 각 사람 객체는 ID, 이름, 나이, 이메일을 포함합니다. 🧑‍💻
• 검색 입력 시 모든 키 입력에 대해 이름에 대한 대소문자 구분 없는 부분 문자열 일치를 수행하며, 최대 10개의 결과를 표시합니다. ⚙️
• useState (query, selected), useMemo (필터링된 결과 캐싱을 통한 성능 최적화), useEffect (디버깅)와 같은 React 훅을 활용합니다. ⚛️
• 검색 결과 목록은 사용자가 입력하기 전까지 비어 있으며, 결과 항목을 클릭하면 세부 정보 패널에 해당 데이터가 강조 표시됩니다. 🖼️
• 선택된 항목은 다른 항목을 클릭하기 전까지 유지되며, 목록 항목에는 data-test-id="result-item" 속성을 추가해야 합니다. 👆
• 이 문제는 React의 상태 관리 및 배열 메서드와 같은 기본 지식을 평가하는 고전적인 인터뷰 질문으로, 꾸준한 연습의 중요성을 강조합니다. 💪