🌀 state 기반으로 작성된 현재 코드

const usernameChangeHandler = (event) => {
  setEnteredUsername(event.target.value);
};

const ageChangeHandler = (event) => {
  setEnteredAge(event.target.value);
};

• 실제로는 form을 제출할 때만 setEnteredUsername()로 state를 업데이트하고 있는데, 현재 작성된 코드를 보면 키값을 입력 받을 때 마다 계속 state를 업데이트하고 있다.
• state를 사용하여 컨트롤 컴포넌트로 만든 것은 좋지만 키를 입력할 때마다 state를 업데이트하는 것은 너무나 🌀비효율적이다.
• 이럴 때 ✅useRef() 훅을 사용하면 코드를 보다 효율적으로 작성할 수 있다.

✅ useRef()

1. useRef() 훅을 사용하여 ref 생성하기

• useRef()를 사용하면 DOM 요소에 접근하여 작업할 수 있게 해준다. HTML 요소에 연결하여 해당 요소와 작업할 수 있도록 하는 값을 반환한다.
• 초기값을 설정하지 않으면 undefined이다.
• 📝 참고
  모든 리액트 훅과 마찬가지로 useRef도 함수형 컴포넌트 안에서만 사용이 가능하다.

input과 연결할 ref 생성하기

//사용자 이름 입력하는 인풋과 연결할 ref 생성
const nameInputRef = useRef();

//사용자 나이 입력하는 인풋과 연결할 ref 생성
const ageInputRef = useRef();

useRef()로 생성되는 ref 값은 항상 current prop을 가지고 있는 객체이다.

• current 프롭은 그 ref가 연결된 실제 DOM 노드를 값으로 가진다.
  그래서 여러가지 작업을 할 수 있다.
• 그런데 DOM을 리액트에 의해서 조작하려고 리액트를 사용하는데 직접 DOM을 조작하는 것은 좋지 않다.
• 여기서의 용도는 해당하는 input의 데이터를 정확하게 읽기 위한 용도이지 뭔가 조작해서 바꾸려고 하는게 아니다.

2. 연결할 input에 ref prop을 추가하여 ref 값 연결하기

ref={nameInputRef}, ref={ageInputRef}

<input
  id="username"
  type="text"
  // ✅ ref
  ref={nameInputRef}
  />

//...

<input
  id="age"
  type="number"
  // ✅ ref
  ref={ageInputRef}
  />

• 그러면 리액트가 코드에 처음 도달해서 모드를 렌더링할 때, nameInputRef와 ageInputRef에 저장된 값을 이 인풋을 기반으로 렌더링된 네이티브 DOM 요소에 설정한다.
• nameInputRef와 ageInputRef 안에 든 값은 나중에 Real DOM의 요소가 된다.

3. addUserHandler 함수 안에 새로운 상수를 만들고 ref에 저장된 현재 input 값을 저장하고, 조건 값에 사용한 상수를 state 값 대신 ref로 가져온 상수로 다 바꾸기

const addUserHandler = (event) => {
    event.preventDefault();
    //✅ 3. 상수를 만들고 ref에 저장된 현재 input 값 저장
    // 조건 값에 사용한 상수를 state대신 ref로 가져온 상수로 다 바꾼다.
    const enteredRefName = nameInputRef.current.value;
    const enteredRefAge = ageInputRef.current.value;

    if (
      enteredRefName.trim().length === 0 ||
      enteredRefAge.trim().length === 0
    ) {
      setError({
        title: "Invalid input",
        message: "Please enter a valid name and age (non-empty values).",
      });
      return;
    }
    if (+enteredRefAge < 1) {
      setError({
        title: "Invalid age",
        message: "Please enter a valid age (> 0).",
      });
      return;
    }
    props.onAddUser(enteredRefName, enteredRefAge);
    //...
  };

4. 입력 후 input 값 재설정하기 위해 DOM 조작하기

// ❌ setState 삭제
// setEnteredUsername("");
// setEnteredAge("");

//✅ 
nameInputRef.current.value = "";
ageInputRef.current.value = "";

• 일반적으로 DOM을 직접 조작하는 것을 권장하지 않지만 사용자가 입력한 값 재설정하기 위한 경우는 사용해도 무방하다.
• 이 방법은 흔히 쓰이는 방법은 아니다. DOM 조작하기 위해 ref 쓰는 경우는 매우 드물기 때문이다. 그래도 여기서 잠깐 쓰는 건 괜찮다 ^^..
• 리액트는 state로 컴포넌트를 컨트롤하는데 이렇게 직접 DOM을 조작하면 리액트가 컨트롤하지 못하는 컴포넌트(Uncontrolled Component)가 된다. 이런식으로 쓰고 싶지 않으면 원래 작성했던 대로 state 기반으로 코드를 작성하면 된다.

✅ 전체 코드

import React, { useState, useRef } from "react";

import Card from "../UI/Card";
import Button from "../UI/Button";
import ErrorModal from "../UI/ErrorModal";
import classes from "./AddUser.module.css";

const AddUser = (props) => {
  //✅ 1. useRef() 훅을 사용하여 ref 생성
  // 사용자 이름 입력하는 인풋과 연결할 ref 생성
  const nameInputRef = useRef();
  // 사용자 나이 입력하는 인풋과 연결할 ref 생성
  const ageInputRef = useRef();

  //❌ 이제 state 더 이상 사용하지 않아도 되기 때문에 삭제
  // const [enteredUsername, setEnteredUsername] = useState("");
  // const [enteredAge, setEnteredAge] = useState("");
  const [error, setError] = useState();

  const addUserHandler = (event) => {
    event.preventDefault();
    //✅ 3. 상수를 만들고 ref에 저장된 현재 input 값 저장
    // 조건 값에 사용한 상수를 state대신 ref로 가져온 상수로 다 바꾼다.
    const enteredRefName = nameInputRef.current.value;
    const enteredRefAge = ageInputRef.current.value;

    if (
      enteredRefName.trim().length === 0 ||
      enteredRefAge.trim().length === 0
    ) {
      setError({
        title: "Invalid input",
        message: "Please enter a valid name and age (non-empty values).",
      });
      return;
    }
    if (+enteredRefAge < 1) {
      setError({
        title: "Invalid age",
        message: "Please enter a valid age (> 0).",
      });
      return;
    }
    props.onAddUser(enteredRefName, enteredRefAge);
    // ❌ setState 삭제
    // setEnteredUsername("");
    // setEnteredAge("");

    //✅ 4. 일반적으로 DOM을 직접 조작하면 안되긴 한데 사용자가 입력한 값 재설정하기 위한 경우는 사용해도 무방하지만 흔히 쓰이는 방법은 아니다. DOM 조작하기 위해 ref 쓰는 경우는 매우 드물기 때문! 근데 여기선 쓸거임!
    nameInputRef.current.value = "";
    ageInputRef.current.value = "";
    //이렇게 안쓰고 싶으면 state 기반 해결법 사용하면 된다.
  };

  // ❌ state 관련된 부분 다 삭제
  // const usernameChangeHandler = (event) => {
  //   setEnteredUsername(event.target.value);
  
  //❗️ ref를 콘솔에 찍어보면 current 값이 id가 username인 input이 출력되는 것을 확인할 수 있다.
  //console.log(nameInputRef);
  //console.log(nameInputRef.current.value);
  // };

  // const ageChangeHandler = (event) => {
  //   setEnteredAge(event.target.value);
  //  console.log(ageInputRef);
  // };
  
  const errorHandler = () => {
    setError(null);
  };

  //✅ 2. 연결할 JSX 코드에 ref prop 추가하여 ref 연결하기
  //ref={nameInputRef}, ref={ageInputRef}
  return (
    <>
      {error && (
        <ErrorModal
          title={error.title}
          message={error.message}
          onConfirm={errorHandler}
        />
      )}
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            // ❌ value={enteredUsername}
            // ❌ onChange={usernameChangeHandler}
            // ✅ ref
            ref={nameInputRef}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            // ❌ value={enteredAge}
            // ❌ onChange={ageChangeHandler}
            // ✅ ref
            ref={ageInputRef}
          />
          <Button type="submit">Add User</Button>
        </form>
      </Card>
    </>
  );
};

export default AddUser;

🔥 State vs Ref

state를 키 로그 기록용으로 사용하는건 별로 좋지 않기 때문에 값만 읽고 싶지 아무 것도 바꿀 계획이 없다면 ref가 낫다.

• ref
  적은 코드로 구현 가능
  하지만 DOM 조작한다는 상당히 예외적인 일을 해야 함
  ref 사용한 컴포넌트는 (리액트에 의해)제어되지 않는 컴포넌트

• state
  확실히 더 깔끔함
  하지만 코드를 ref보다 더 많이 써야 함
  state 사용한 컴포넌트는 (리액트에 의해)제어되는 컴포넌트