# All files / src/chap07 HookTransition.js

0% Statements 0/11
100% Branches 0/0
0% Functions 0/5
0% Lines 0/10

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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114

     // import { useState, useTransition } from 'react';
    // import books from './books';
    // import commentList from './comments';
    // import { BookDetails, CommentList } from './HookTransitionChild';

    // export default function HookTransition() {
    //   // 선택한 도서(isbn)와 해당 코멘트(comments)
    //   const [isbn, setIsbn] = useState('');
    //   const [comments, setComments] = useState([]);

    //   // 선택 상자 변경에 따른 State 반영
    //   const handleChange = e => {
    //     const isbn = e.target.value;
    //     setIsbn(isbn);
    //     setComments(commentList.filter(c => c.isbn === isbn));
    //   };

    //   return (
    //       <>
    //       <select onChange={handleChange}>
    //         <option value="">선택해주세요.</option>
    //         {books.map(b => (
    //            <option key={b.isbn} value={b.isbn}>{b.title}</option>
    //         ))}
    //       </select>
    //       <BookDetails isbn={isbn} />
    //       <hr />
    //       <CommentList src={comments} />
    //       </>
    //   );
    // }

    // Code 7-7-4
    // import { useState, useTransition } from 'react';
    // import books from './books';
    // import commentList from './comments';
    // import { BookDetails, CommentList } from './HookTransitionChild';

    // export default function HookTransition() {
    //   const [isbn, setIsbn] = useState('');
    //   const [comments, setComments] = useState([]);
    //   // 트랜지션 활용을 위한 준비
    //   const [isPending, startTransition] = useTransition();

    //   // 선택 상자 변경에 따른 State 반영
    //   const handleChange = e => {
    //     const isbn = e.target.value;
    //     setIsbn(isbn);
    //     // 트랜지션의 명령으로 State 업데이트하기
    //     startTransition(() => {
    //       setComments(commentList.filter(c => c.isbn === isbn));
    //     });
    //   };

    //   return (
    //       <>
    //       <select onChange={handleChange}>
    //         <option value="">선택해주세요.</option>
    //         {books.map(b => (
    //            <option key={b.isbn} value={b.isbn}>{b.title}</option>
    //         ))}
    //       </select>
    //       <BookDetails isbn={isbn} />
    //       <hr />
    //       <CommentList src={comments} />
    //       </>
    //   );
    // }

    // Code 7-7-5
    import { useState, useTransition } from 'react';
    import books from './books';
    import commentList from './comments';
    import { BookDetails, CommentList } from './HookTransitionChild';

    export default function HookTransition() {
      const [isbn, setIsbn] = useState('');
      const [comments, setComments] = useState([]);
      // 트랜지션 활용을 위한 준비
      const [isPending, startTransition] = useTransition();

      // 선택 상자 변경에 따른 State 반영
      const handleChange = e => {
        const isbn = e.target.value;
        setIsbn(isbn);
        // 트랜지션의 명령으로 State 업데이트하기
        startTransition(() => {
          setComments(commentList.filter(c => c.isbn === isbn));
        });
      };

      return (
          <>
          <select onChange={handleChange}>
            <option value="">선택해주세요.</option>
            {books.map(b => (
               <option key={b.isbn} value={b.isbn}>{b.title}</option>
            ))}
          </select>
          <BookDetails isbn={isbn} />
          <hr />
          <CommentList src={comments} isPending={isPending}
          />
          </>
      );
    }