useRef

• 특정 DOM 선택할 때 사용
• 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있겠죠. 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 시 등등

예제

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

export const InputSample = () => {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });

  const nameInput = useRef();

  const { name, nickname } = inputs;

  const onChange = (e) => {
    setInputs({
      ...inputs,
      [e.target.name]: e.target.value
    });
  };

  const onClick = () => {
    setInputs({
      name: "",
      nickname: ""
    });
    nameInput.current.focus();
  };

  return (
    <>
      <input name="name" value={name} onChange={onChange} ref={nameInput} />
      <input name="nickname" value={nickname} onChange={onChange} />
      <button onClick={onClick}>reset</button>
      <p>
        {name}
        {nickname}
      </p>
    </>
  );
};

• useRef 사용하여 ref 설정하기.
• 원하는 위치(DOM)에 ref={} 형태로 적어주면 됨
• .current값은 우리가 원하는 DOM값임.

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

const getAverage = (num) => {
  console.log("average 실행중");
  if (num.length === 0) return 0;
  const sum = num.reduce((a, b) => a + b);
  return sum / num.length;
};

export const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const inputE1 = useRef(null);

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []);
  const onInsert = useCallback(
    (e) => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber("");
      inputE1.current.focus();
    },
    [number, list]
  );

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} ref={inputE1} />
      <button onClick={onInsert}>등록</button>
      {list.map((value, index) => (
        <p key={index}>{value}</p>
      ))}
      <div>평균:{avg}</div>
    </div>
  );
};

• 등록 버튼을 눌렀을 때 input에 focus 잡힘.

로컬변수 사용하기

• 컴포넌트 로컬변수 사용할 때 useRef 사용함
• 로컬변수 : 렌더링과 상관없이 바뀔 수 있는 값
• 컴포넌트 안에서 조회, 수정될 수 있는 변수 관리 시
• 변수 값이 바뀌어도 리렌더링되지 않음.

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

export const RefSample = () => {
  const id = useRef(1);

  const setId = (n) => {
    id.current = n;
  };

  const printId = () => {
    console.log(id.current);
  };
  return <div>RefSample</div>;
};