리액트 숙련(React Hooks - useRef)

# useRef란?

예를 들면 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등에 사용된다.

 

useRef hook은 다음과 같이 사용한다.

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

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

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

export default App;

콘솔에 찍힌 값

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

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

 

1. 저장공간
   1. state와 비슷한 역할을 해요. 다만 state는 변화가 일어나면 다시 렌더링이 일어난다. 내부 변수들은 초기화됨
   2. ref에 저장한 값은 렌더링을 일으키지 않는다. 즉, ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있다. 
   3. 컴포넌트가 100번 렌더링 → ref에 저장한 값은 유지됨.
   4. 정리하면
      1. state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
      2. ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.
2. DOM
   1. 렌더링 되자마자 특정 input이 focusing 돼야 한다면 useRef를 사용하면 된다.

 

 

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

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const plusStateCountButtonHandler = () => {
    setCount(count + 1);
  };

  const plusRefCountButtonHandler = () => {
    countRef.current++;
  };

  return (
    <>
      <div>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button>
      </div>
      <div>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button>
      </div>
    </>
  );
}

export default App;

state버튼은 누를때마다 값이 증가하는 반면, Ref버튼은 눌러도 값이 바로 증가하지 않는다.

Ref에 저장한 값은 렌더링을 일으키지 않기 때문인데, Ref 버튼을 10번 눌러도 값이 변하지 않지만, state버튼을 한번 눌러 렌더링을 해주면 Ref 값이 변함을 볼 수 있다. 

 

 

# DOM 접근

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;

위 코드는 화면이 렌더링 되자마자 아이디를 입력하는 input에 포커싱이 되게하는 코드이다. 변수 idRef에 useRef()를 할당해주고 

input의 ref 속성을 활용해서 넣어준다. 

 

그리고 useEffect()를 사용해 렌더링이 될때 idRef.current.focus()로 id input에 포커싱이 되게 한다.

 

 

 

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;

위 코드는 onChange로 id input에 들어온 값을 실시간으로 변화시키고, useEffect()를 한번 더 써서 만약 id의 길이가 10보다 크거나 같다면 pwRef.current.focus()를 통해 패스워드 인풋창으로 자동으로 포커싱 되게 했다.