🔍 리액트 블로그에 검색 기능 추가하기

안녕하세요! 리액트 블로그 여섯 번째 시간입니다 😄
이번엔 작성한 글들을 제목으로 검색할 수 있는 기능을 추가해볼 거예요.

검색창에 글 제목 일부를 입력하면, 그에 맞는 글만 보여지도록 만들어볼게요!

---

📌 목표

• 검색어를 입력할 수 있는 입력창 추가
• 입력한 값에 따라 포스트 리스트 실시간 필터링

---

📄 1. PostList.js 수정

📄 src/components/PostList.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

function PostList({ posts }) {
  const [searchTerm, setSearchTerm] = useState('');

  // 🔍 검색 필터링
  const filteredPosts = posts.filter(post =>
    post.title.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>📚 글 목록</h2>

      <input
        type="text"
        placeholder="제목으로 검색하세요"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{ width: '60%', padding: '8px', marginBottom: '20px' }}
      />

      {filteredPosts.length === 0 ? (
        <p>검색 결과가 없습니다.</p>
      ) : (
        <ul>
          {filteredPosts.map(post => (
            <li key={post.id} style={{ marginBottom: '10px' }}>
              <Link to={`/post/${post.id}`}>
                <strong>{post.title}</strong>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default PostList;

---

🧠 코드 설명

• searchTerm: 검색어를 상태로 관리
• filteredPosts: posts를 제목 기준으로 필터링
• 검색어 입력 시마다 onChange로 검색어 업데이트
• 검색 결과 없으면 안내 문구 표시

---

🎉 완성 결과

• 검색창 입력 시 실시간으로 글 목록 필터링
• 소문자/대문자 구분 없이 검색 가능
• 검색 결과 없을 경우 메시지 출력