[React] useRef란?

자바스크립트를 사용 할 때, 우리가 특정 DOM에 접근 해야 하는 상황에서는 getElementById 혹은 querySelector 같은 DOM Selector 함수를 사용해서 DOM에 접근해야 한다.

 

리액트를 사용하는 프로젝트에서도 가끔은 DOM에 직접 접근해야 하는 상황이 발생 할 수 있다.

예를들어 특정 엘리먼트의 크기를 가져와야한다던지, 스크롤바의 위치를 가져온다던지, 포커스를 설정해줘야 한다 등등.. 수많은 상황이 있을 것이다. 

 

그럴 때, 리액트에서 ref라는 것을 사용한다.

함수형 컴포넌트에서 ref는 useRef라는 hook을 사용하게 된다. 

 

https://react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook

 

---

Ref의 용도

 

Ref의 바람직한 사용 사례는 다음과 같다. (비제어 컴포넌트를 제어할 때)

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

이 외 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양해야 한다.

---

단순히 DOM에 접근하기 위함이 아닌 리렌더링을 방지하고자 할때 사용하기도 한다.

import React, { useState } from "react";
import styled from "styled-components";
const Test = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => {
    setInput(e.target.value);
    console.log(input);
  };

  return (
    <>
      <Input onChange={inputHandler} />
    </>
  );
};
export default Test;

const Input = styled.input`
  width: 200px;
  height: 30px;
`;

위 코드는 input 태그에 문자를 입력하면 state에 저장하는 방법이다. 이 경우 이벤트가 발생할때마다 state가 변경되어 계속해서 리렌더링 된다.

반복되는 리렌더링..

 

 

하지만 아래와 같이 코드를 작성 후 버튼을 클릭하여 해당 value값을 가져오도록 한다면 리렌더링 없이 값을 가져올 수 있다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
const Test = () => {
  const [input, setInput] = useState("");
  const inputRef = useRef();
  const onClickHandler = () => {
    setInput(inputRef.current.value);
  };
  console.log(input);

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={onClickHandler}>ref!</button>
    </>
  );
};
export default Test;

const Input = styled.input`
  width: 200px;
  height: 30px;
`;

onChange로 이벤트를 받을때와 달리 한번만 렌더링 해준다!