[28]리액트 ref 와 state

ref ?

컴포넌트 라이프사이클내 유지되며, 변경가능한 변수이고 값이 변할때 렌더링이되지 특징을 가지고있으며
주로 DOM 엘리먼트에 접근하여 컴폰너트의 전체 렌더링과 관계없는 작업을 할때 유용하게 사용된다.

ref 와 state

ref 의 특징을보면 state 와 유사한부분이있다.

state 는 컴포넌트 라이프 사이클내에서 유지가되며 , 변경가능한 변수이고 , 값이 변할때 렌더링이된다는 특징이있다.

간단하게 리렌더링이 필요한 값을 다룰때는 state 를 , 아닐때는 ref를 사용한다고 보면 된다.

import React, { useRef, useState } from "react";
import { Card } from "../UI/Card";
import classes from "./AddUser.module.css";
import { Button } from "../UI/Button";
import { ErrorModal } from "../UI/ErrorModal";

export const AddUser = ({ onAddUser }) => {
  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredUserAge, setEnteredUserAge] = useState("");
  const [error, setError] = useState();

  **const inputName = useRef();**

  const addUserHandler = (e) => {
    e.preventDefault();

    if (
      enteredUsername.trim().length === 0 ||
      enteredUserAge.trim().length === 0
    ) {
      setError({
        title: "데이터 에러",
        message: "이름 과 나이를 입력해주세요",
      });
      return;
    }
    if (+enteredUserAge < 1) {
      setError({
        title: "나이 에러",
        message: "나이를 제대로 입력해주세요.",
      });
      return;
    }
        **console.log(inputName.current.value);**
    onAddUser(enteredUsername, enteredUserAge);

    setEnteredUserAge("");
    setEnteredUsername("");
  };

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

  const userageChangeHandler = (e) => {
    setEnteredUserAge(e.target.value);
  };

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

  return (
    <>
      {error && (
        <ErrorModal
          title={error.title}
          message={error.message}
          onClick={modalCancelHandler}
        />
      )}

      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            value={enteredUsername}
            type="text"
            onChange={usernameChangeHandler}
            **ref={inputName}**
          />
          <label htmlFor="age">Age</label>
          <input
            id="age"
            value={enteredUserAge}
            type="number"
            onChange={userageChangeHandler}
          />
          <Button type="submit">추가 하기</Button>
        </form>
      </Card>
    </>
  );
};

사용방법은 위에 코드처럼 볼드된 부분을 확인해보면된다.

면접질문에서도 자주 나온다고하는데 자세히는 추후에 다시 정리를 해봐야겠다.