[React] 검색 페이지 구현

오늘은 리액트로 검색 페이지 만들어 볼까요❓
레츠기릿 〰〰〰〰😎

React로 간단한 검색 페이지를 만드는 예제
👉 검색어를 입력하면 데이터 목록에서
해당 검색어를 포함한 항목만 필터링해서 보여줌👀

import React, { useState } from 'react';

function App() {
  // 검색어 상태를 관리할 useState 훅을 사용
  const [searchTerm, setSearchTerm] = useState('');

  // 예시 데이터 목록, 이 데이터 중에서 검색어에 맞는 항목을 찾음
  const data = [
    'React',
    'JavaScript',
    'Redux',
    'HTML',
    'CSS',
    'Node.js',
    'Express',
    'MongoDB',
  ];

  // 검색어에 따라 필터링된 데이터를 가져옴
  const filteredData = data.filter(item =>
    // 검색어와 항목을 소문자로 변환해 대소문자 구분 없이 포함 여부 확인
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // 검색어가 변경될 때 호출되는 함수
  const handleSearch = (event) => {
    // 이벤트가 발생할 때마다 입력된 값으로 searchTerm을 업데이트
    setSearchTerm(event.target.value);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      {/* 검색창 */}
      <h1>Search Page</h1>
      <input
        type="text"
        placeholder="Search here..."
        value={searchTerm}
        onChange={handleSearch} // 입력이 변경될 때마다 handleSearch 함수 호출
        style={{ padding: '8px', width: '200px', marginBottom: '20px' }}
      />

      {/* 검색 결과 */}
      <ul>
        {/* 필터링된 데이터 배열을 순회하면서 항목을 표시 */}
        {filteredData.map((item, index) => (
          <li key={index}>{item}</li> // 각 항목을 <li>로 보여줌
        ))}
      </ul>
    </div>
  );
}

export default App;

🔍목록에 해당되는 것만 찾아줌
해당 되는 게 아닌 걸 검색창에 입력하면 아무것도 안 뜸