React Hooks - useRef

useRef

DOM 요소에 접근할 수 있도록 하는 React Hook!

✔예를 들면 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등

 

사용방법

그리고, 변경도 가능해요!

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);
  
//  function App() {
//  const ref = useRef("초기값");
//  console.log("ref 1", ref);

//  ref.current = "바꾼 값";
//  console.log("ref 1", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

 

⭐이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다!⭐

이러한 특징 때문에 useRef는 다음 2가지 용도로 사용된다.

1. 저장공간

- state와 비슷한 역할을 해요. 다만 state는 변화가 일어나면 다시 렌더링이 일어나요. 내부 변수들은 초기화가 되죠.

- ref에 저장한 값은 렌더링을 일으키지 않아요. 즉, ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있죠.

- 컴포넌트가 100번 렌더링 → ref에 저장한 값은 유지돼요.

정리하면

⭐state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.

⭐ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

2. DOM

- 렌더링 되자마자 특정 input이 focusing 돼야 한다면 useRef를 사용하면 된다.

 

state와 ref의 차이점

state는 변경되면 렌더링이 되고, ref는 변경되면 렌더링이 안된다는걸 다시 한번 기억하기!!!

 

DOM 접근

<input /> 태그에는 ref라는 속성이 있다. 이걸 통해 우리는 해당 DOM 요소로 접근할 수 있다.

useRef 사용하여 포커싱 주기

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;

아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하는 코드

import { useEffect, useRef, useState } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");
  const pwRef = useRef("");

  const [id, setId] = useState("");

  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  // 왜 useEffect 안에 놓았을까요?
  useEffect(() => {
    if (id.length >= 10) {
      pwRef.current.focus();
    }
  }, [id]);

  return (
    <>
      <div>
        아이디 :
        <input
          type="text"
          ref={idRef}
          value={id}
          onChange={onIdChangeHandler}
        />
      </div>
      <div>
        비밀번호 : <input type="password" ref={pwRef} />
      </div>
    </>
  );
}

export default App;

비밀번호 타입이 패스워드? -> 숫자 가려줌

 

왜 id.length ≥ 10 이 로직을 useEffect 안에 넣었는지?

아이디가 하나하나 바뀔 때마다 화면이 계속해서 바뀐다 -> state가 갱신되고 있다. -> 랜더링이 다시 계속해서 된다.

state가 바뀔 때마다 어떤 것(id가 입력된 길이가 10자리냐 아니냐)을 파악해야 한다.

[id]값이 바뀔 때마다 수행이 돼야 하기 때문에.