인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다.

최기범님, 검색어를 입력할 때 빈창이 뜨는 문제와 관련해 설명해드리겠습니다. 입력한 내용을 기반으로 추측하건대, React 환경에서 “검색어를 입력하세요”란에 검색어를 입력할 때 발생하는 문제로 보입니다.

1. 빈창이 나타나는 이유:

   • 빈창이 나타나는 이유 중 하나는 렌더링 문제일 가능성이 있습니다. 검색 기능을 구현할 때 입력한 검색어에 매칭되는 항목이 없을 경우 의도치 않게 빈 화면이 표시될 수 있습니다. 이를 개선하려면 검색 결과가 없을 때의 UI를 고려하여 코드를 보완하는 것이 좋습니다.
     

2. 리스트 자식 요소에 고유 ‘key’ 필요:

   • ‘List.jsx:73 Each child in a list should have a unique “key” prop’ 경고 메시지를 보면, 조건에 따라 렌더링하는 리스트의 자식 요소의 ‘key’를 설정하지 않아서 발생하는 경고일 수 있습니다. React에서 리스트를 렌더링할 때 각각의 항목에 고유한 ‘key’ 속성을 부여하는 것이 필요합니다.
     

3. 해결 방법:

   • 기본적으로 map 함수를 사용하여 리스트를 생성할 때, 각 요소에 key 속성을 설정해야 합니다. 예를 들어:
     

     
     items.map((item, index) => (
     <li key={index}>{item.text}</li>
     ))
     

     
     꼭 key 값을 고유한 값으로 설정하는 것이 중요합니다. 고유한 아이디가 있다면, 이를 사용하는 것이 더욱 좋습니다.
     

4. 빈 검색 상태 처리:

   • 검색 조건에 맞는 항목이 없을 때 보여줄 대체 메시지나 UI를 제공하여 사용자가 빈 화면을 보지 않도록 처리할 수 있습니다.
     

추가적인 코드나 환경 설정에 따라 달라질 수 있으니, 위 내용을 기반으로 코드 및 UI를 점검해보시면 도움이 될 것 같습니다. 궁금한 점이 있으면 언제든지 질문하세요!

이미지 및 기타 참고 자료:
-
- GitHub Repository