All files / src/chap07 MyTextBox.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
export default function MyTextBox({ label, ref }) {
  return (
    <label>
      {label} :
      <input type="text" size="15" ref={ref} />
    </label>
  );
}
 
 
 
// Code 7-2-8
// import { forwardRef } from 'react';
 
// const MyTextBox = forwardRef(({ label }, ref) => (
//   <label>
//     {label} :
//     <input type="text" size="15" ref={ref} />
//   </label>
// ));
 
// export default MyTextBox;
 
 
 
// Code 7-2-9
// // useImperativeHandle 함수를 사용하여 다시 작성한 경우
// import { forwardRef, useImperativeHandle, useRef } from 'react';
 
// const MyTextBox = forwardRef(({ label }, ref) => {
//   // 텍스트 상자에 대한 참조 준비
//   const input = useRef(null);
 
//   // 부모 컴포넌트에 노출할 오브젝트를 생성한다.
//   useImperativeHandle(ref, () => {
//     return {
//       focus() {
//         input.current.focus();
//       },
//     };
//   }, []);
 
//   return (
//     <label>
//       {label}：
//       <input type="text" size="15" ref={input} />
//     </label>
//   );
// });
 
// export default MyTextBox;