useRef란?

• 새로운 Reference 객체를 생성하는 기능을 의미한다.
• 렌더링 하는 특정 DOM 요소에 접근 → 해당 요소 조작 가능

useRef와 useState의 차이

useRef 동작 원리

• 함수 useRef는 인수로 전달한 값을 초기 값으로 하는 Ref 객체를 생성한다.
• 생성한 Ref를 상수 inputRef에 저장한다.
• <input> 태그에서 ref={inputRef} 명령으로 inputRef가 DOM 입력 폼에 접근하도록 설정한다.
• inputRef를 이용하면 입력 폼을 직접 조작할 수 있다.

변경된 수정 횟수 카운트 하는 기능 만들기

• countRef 객체 생성
• onChange 이벤트 핸들러를 사용
  • countRef의 current 값을 +1 증가하도록 입력

import { useState, useRef } from "react";

// 간단한 회원가입 폼
// 이름, 생년월일, 국적, 자기소개

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: "",
  });

  const countRef = useRef(0);

  const onChange = (e) => {
    countRef.current++; // 수정한 횟수
    console.log(countRef.current);
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

화면 결과

• 입력 폼에 입력 시 콘솔 창에 수정 횟수가 확인 되는 것을 알 수 있다.

회원가입 제출 기능 만들기

• 버튼 태그 추가 → onSubmit 이벤트 핸들러 생성
• 사용자가 이름을 입력 받는 input 태그에 이름을 입력했는지 확인하기 위해 조건문 추가