- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
안녕하세요! 리액트 블로그 여섯 번째 시간입니다 😄
이번엔 작성한 글들을 제목으로 검색할 수 있는 기능을 추가해볼 거예요.
검색창에 글 제목 일부를 입력하면, 그에 맞는 글만 보여지도록 만들어볼게요!
📌 목표
- 검색어를 입력할 수 있는 입력창 추가
- 입력한 값에 따라 포스트 리스트 실시간 필터링
📄 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
로 검색어 업데이트 - 검색 결과 없으면 안내 문구 표시
🎉 완성 결과
- 검색창 입력 시 실시간으로 글 목록 필터링
- 소문자/대문자 구분 없이 검색 가능
- 검색 결과 없을 경우 메시지 출력