BookCard 렌더: 클린 코드
BookCard 렌더: 리팩터링 2판
BookCard 렌더: 모던 자바스크립트 Deep Dive
BookCard 렌더: 함께 자라기
BookCard 렌더: HTTP 완벽 가이드
BookCard 렌더: 누구나 자료 구조와 알고리즘

// src/components/BookCard.jsx
import { memo } from 'react';
 
function BookCard({ book, onToggle, onDelete }) {
  return (
    <li className="book-card" style={{ borderColor: book.coverColor }}>
      <h3>{book.title}</h3>
      <p>{book.author}</p>
      <p>상태: {book.status}</p>
      <button type="button" onClick={() => onToggle(book.id)}>
        상태 변경
      </button>
      <button type="button" onClick={() => onDelete(book.id)}>
        삭제
      </button>
    </li>
  );
}
 
// props가 얕게 같으면 리렌더를 건너뜁니다.
// onToggle·onDelete가 매 렌더마다 새 함수면 이 memo는 무의미해집니다.
export default memo(BookCard);

// src/pages/BookListPage.jsx (일부 — 헤더 부분은 07편과 동일하게 유지)
import { useMemo, useCallback, useState } from 'react';
import { Link } from 'react-router';
import BookCard from '../components/BookCard.jsx';
import { useLocalStorage } from '../hooks/useLocalStorage.js';
import { useDebounce } from '../hooks/useDebounce.js';
import { booksReducer } from '../reducers/booksReducer.js';
 
function BookListPage() {
  const [books, setBooks] = useLocalStorage('bookshelf-books', []);
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, 300);
 
  // 검색어가 그대로면 filteredBooks 배열을 재생성하지 않습니다.
  // 배열이 새로 생기면 아래에서 감싼 memo도 무력화되므로 필수입니다.
  const filteredBooks = useMemo(() => {
    const term = debouncedKeyword.trim().toLowerCase();
    if (!term) return books;
    return books.filter((book) => book.title.toLowerCase().includes(term));
  }, [books, debouncedKeyword]);
 
  // BookCard가 memo로 감싸져 있으므로, 함수 참조가 유지돼야 리렌더를 건너뜁니다.
  const handleToggle = useCallback((id) => {
    setBooks((prevBooks) => booksReducer(prevBooks, { type: 'toggled', payload: { id } }));
  }, [setBooks]);
 
  const handleDelete = useCallback((id) => {
    setBooks((prevBooks) => booksReducer(prevBooks, { type: 'deleted', payload: { id } }));
  }, [setBooks]);
 
  return (
    <section>
      {/* ...기존 page-header(h1, ThemeToggle) 유지 */}
      <input
        type="search"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="제목 검색"
        aria-label="책 검색"
      />
      <ul className="book-list">
        {filteredBooks.map((book) => (
          <BookCard key={book.id} book={book} onToggle={handleToggle} onDelete={handleDelete} />
        ))}
      </ul>
      <Link to="/books/new">책 추가</Link>
    </section>
  );
}
 
export default BookListPage;

npm run dev