ref

🚨  오늘은 ref에 대해서 공부하기,,,,

ref 가 하는 일은 ??

=  ref는 상당히 강력한 아이다.

👉  기본 상태에서의 ref는 다른 DOM요소로 엑세스해서 작업할 수 있게 해주는 역할이다.

🌀 ref를 사용하지 않을 경우,

예시)

import React, { useState } from "react";

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

const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredAge, setEnteredAge] = useState("");
  const [error, setError] = useState();

  const addUserHandler = (event) => {
    event.preventDefault();
    if (enteredUsername.trim().length === 0 || enteredAge.trim().length === 0) {
      setError({
        title: "Invalid input",
        message: "Please enter a valid name and age (non-empty values).",
      });
      return;
    }
    if (+enteredAge < 1) {
      setError({
        title: "Invalid age",
        message: "Please enter a valid age (> 0).",
      });
      return;
    }
    props.onAddUser(enteredUsername, enteredAge);
    setEnteredUsername("");
    setEnteredAge("");
  };

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

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

  const errorHandler = () => {
    setError(null);
  };

  return (
    <Wrapper>
      {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}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
          />
          <Button type="submit">Add User</Button>
        </form>
      </Card>
    </Wrapper>
  );
};

export default AddUser;

					<input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
          />

• 여기 보이는 코드들 중에서 위와 같이 input 태그에서 유저가 입력하는 바를 추적해서 관리한다.

const AddUser = (props) => 

• state에서 상태가 존재하며 매 키 입력에 따라 상태가 업데이트 된다.

{
  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredAge, setEnteredAge] = useState("");
  const [error, setError] = useState();

• 유저의 키 입력을 따라 값을 업데이트하고 이를 상태에 저장하는 것이다!.

				<input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
          />

• 그리고 그 저장한 상태를 input 으로 피드백하고 나중에 그 상태를 활용해서

props.onAddUser(enteredUsername, enteredAge);
    setEnteredUsername("");
    setEnteredAge("");
  };

• input을 리셋하는 한편 데이터가 필요한 곳으로 보내준다.

👉  ref를 사용하지 않을 경우에 form만 제출하기만 하면 되는데 키 입력마다 상태를 업데이트하는 건 좀 ... 불편스 할 수있다... (과하다..) 이럴 때 필요한것은 ?!!! ref!!!

🌀 ref를 사용할 경우

ref를 사용하면 연결을 만들 수 있다.

👉  렌더링 될 HTML요소와 자바스크립트 코드간의 연결이 가능!!

👉  useRef가 반환하는 값이 중요!! 하다. 나중에 활용하게 되면 연결하려는 요소에 작업할 수 있게 해준다.

사용방법

먼저, ref를 사용하려면

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

• ref를 불러와야 한다.

const AddUser = (props) => {
  const nameInputRef = useRef();
  const ageInputRef = useRef();

  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredAge, setEnteredAge] = useState("");
  const [error, setError] = useState();

• 코드 안에, 함수형 컴포넌트 안에서 불러와야 한다.
• 오직 함수형에서만 활용이 가능하다.
• ref를 연결하려는 HTML코드로 가서 특별한 prop을 추가한다. ⇒ ref prop

					<input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
						ref={ageInputRef}
          />

• key prop과 마찬가지로 내장 prop이며 어느 HTML요소에도 추가할 수 있다. ⇒ 어떤 HTML요소든 하나의 레퍼런스와 연결 할 수 있기 때문에