# All files / src/chap07 MyTextBox.js

0% Statements 0/1
100% Branches 0/0
0% Functions 0/1
0% Lines 0/1

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

     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;