[React - Hook] useRef가 뭘까 ? 어떻게 사용하지 ? (예제)

useRef 란?

 

- Reference를 사용하기 위한 Hook

Reference ? 
특정 컴포넌트에 접근할 수 있는 객체 

---

사용법

const ref = useRef(초깃값);

 

 

특징

 

- useRef  Hook은 Reference object를 반환한다. 

{ current : value }

 

- current란 현재 참조하고 있는 Element이다. 

 

- Reference object는 수정이 가능하다.

 

- 반환된 ref는 전 생애주기를 통해 유지된다.

   (즉, 컴포넌트가 계속 렌더링 되더라도 unmount 되기 전까진 값을 유지한다. )

 

- useRef  Hook은 내부의 데이터가 변경되더라도 별도로 알리지 않는다.

 (즉, current 속성을 변경한다고 재렌더링이 되지 않는다. )

   

 

 

정리

-  useRef를 사용한 변수를 변경가능한 current라는 속성을 가진 하나의 상자라고 생각하자! 

 

 

---

 

 

Q. 그렇다면 언제 사용 될까?

 

 

1. 저장공간 (state와 비슷하게 저장공간으로 사용)

 

- useState는  State의 변화를 감지하여 렌더링 되고, 렌더링이 되면 내부 변수는 초기화된다.

 

- 하지만 useRef는 렌더링이 되지 않는다. 따라서 변수값이 유지된다.

 (만약 State의 변화로 렌더링 되어도 ref는 그래도 유지)

 

- 따라서 자주 바뀌는 값을 State 에 넣으면 렌더링이 자주되므로 성능이 저하되지만, ref를 사용하여 이를 방지할 수 있다.

 

 

 

실습1 ▷ 이메일과 비밀번호를 입력하고, 입력한 값들을 받아와 출력해보자.

 

 

---

 

 

2. DOM요소에 접근

 

- 컴포넌트의 태그에 직접 접근한다.

 

- 자바스크립트의 querySelector , getElementById와 비슷하다고 생각하면 된다. 

 

 

 

실습2 ▷ 이를 이용해 다룰 인풋요소를 클릭하지 않아도 FOCUS 할 수있게 만들어 보자. 

 

 

---

실습 해보기

 

[ 실습 1 ]

 

이메일과 비밀번호를 입력하고, 입력한 값들을 받아와 그 아래에 출력하기

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

const UesRef = () => {
  const [emailValue, setEmailValue] = useState(""); // email state 값
  const [pwValue, setPwValue] = useState(""); // pw state 값

  const emailInput = useRef(null); // email input에 대한 useRef
  const pwInput = useRef(null); // pw input에 대한 useRef

  const inputCheck = (e) => {
    e.preventDefault();
    console.log(emailInput);
    console.log(pwInput);

    setEmailValue(emailInput.current.value); //email과 pw의 State값을 업데이트 해준다.
    setPwValue(pwInput.current.value);
  };

  return (
    <form style={{ display: "flex", flexDirection: "column" }}>
      <label>
        이메일 : <input type="email" ref={emailInput} />
      </label>
      <label>
        비밀번호 : <input type="password " ref={pwInput} />
      </label>

      <button type="submit" style={{ width: "100px" }} onClick={inputCheck}>
        로그인
      </button>
      <span>입력한 이메일 : {emailValue}</span>
      <span>입력한 비밀번호 : {pwValue}</span>
    </form>
  );
};

export default UesRef;

 

1.  useState와 useRef를 import해준다.

 

2. email과 pw의 State값을 useState를 통해 초기화 해준다.

 

3. email input과 pw input에 대한 useRef를 생성해준다.

 

4. 생성한 useRef값을 받아오고 싶은 태그에 ref Props로 전달한다. (여기서는 span태그에 주었다.)

 

5. useState의 set함수들을 통해 현재 입력한 input값을 useRef.current.value로 접근하여 가져온다.

 

 

 

 

[ 결과 ]

 

이메일과 비밀번호를 입력하면 그 값을 useRef를 이용하여 가져와 출력하기 성공! 

 

 

 

---

 

[ 실습 2 ]

 

인풋요소를 클릭하지 않아도 FOCUS 할 수있게 만들기

 

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

const App = () => {
  const emailInput = useRef(null); // email input에 대한 useRef
  const pwInput = useRef(null); // pw input에 대한 useRef

  const [emailValue, setEmailValue] = useState(""); // email state 값
  const [pwValue, setPwValue] = useState(""); // pw state 값

  const inputCheck = (e) => {
    e.preventDefault();
    setEmailValue(emailInput.current.value);
    setPwValue(pwInput.current.value);

    //추가코드 ------------------------------------------------------
    if (emailInput.current.value === "") {
      alert("이메일을 입력해주세요");
      emailInput.current.focus();
      return; // if, else 문에 들어오게 되면 setState 실행없이 바로 return
    } else if (pwInput.current.value === "") {
      alert("비밀번호를 입력해주세요");
      pwInput.current.focus();
      return;
    }
  };
  
     //----------------------------------------------------------------

  return (
    <form style={{ display: "flex", flexDirection: "column" }}>
      <label>
        이메일 : <input type="email" ref={emailInput} />
      </label>
      <label>
        비밀번호 : <input type="password" ref={pwInput} />
      </label>

      <button type="submit" style={{ width: "100px" }} onClick={inputCheck}>
        회원가입
      </button>
      <span>{emailValue}</span>
      <span>{pwValue}</span>
    </form>
  );
};

export default App;

 

1. 회원가입 button이 click되었을때 inputCheck라는 함수가 실행된다.

 

2. inputcheck에서 각 값들의 current.value에 접근하여 그 값이 빈값이면 alert로 값을 입력하라고 알려주고 각 값의 input요소에 focus를 시켜준다.

 

 

[ 결과 ]

비밀번호를 입력하지 않았을때 alert로 알려주고 pw inpput요소에 focus 시키기 성공!