# All files / src/chap08 BookNest.js

0% Statements 0/6
0% Branches 0/1
0% Functions 0/4
0% Lines 0/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34

     import React from 'react';
    import { NavLink, Outlet, useParams } from 'react-router-dom';
    import books from '../chap08/books';

    export function BookListPage() {
      return (
        <>
        {/* 책 제목 목록 보기 (키는 ISBN 코드) */}
        {books.map(b => (
          <React.Fragment key={b.isbn}>
            [<NavLink to={`/books/${b.isbn}`}>
              {b.title}</NavLink>]|
          </React.Fragment>
        ))}
        {/* 자식 경로를 표시하기 위한 영역 준비 */}
        <Outlet />
        </>
      );
    }

    export function BookDetailsPage() {
      const { isbn='979-1-1583-9517-9' } = useParams();
      // 루트 매개변수: isbn을 키로 도서 검색
      const book = books.find(b => isbn === b.isbn);

      return (
        <ul>
          <li>ISBN 코드:{book.isbn}</li>
          <li>도서명:{book.title}</li>
          <li>가격:{book.price}</li>
          <li>개요:{book.summary}</li>
        </ul>
      );
    }