# All files / src/chap04 StateFormUC.js

0% Statements 0/5
100% Branches 0/0
0% Functions 0/2
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

     import { useRef } from 'react';

    export default function StateFormUC() {
      // 리액트 요소에 대한 참조 준비
      const name = useRef(null);
      const age = useRef(null);

      // 요소(참조)를 통해 입력값 준비하기
      const show = () => {
        console.log(`안녕하세요, ${name.current.value}（${age.current.value}세） 님！`);
      };

      // 폼 그리기
      return (
        <form>
          {/* 준비된 레퍼런스를 각 요소에 연결 */}
          <div>
            <label htmlFor="name">이름: </label>
            <input id="name" name="name" type="text"
              ref={name} defaultValue="홍길동" />
          </div>
          <div>
            <label htmlFor="age">나이: </label>
            <input id="age" name="age" type="number"
              ref={age} defaultValue="18" />
          </div>
          <div>
            <button type="button" onClick={show}>
              보내기</button>
          </div>
        </form>
      );
    }