All files / src/chap07 HookTransition.js

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}
      />
      </>
  );
}