리액트 Hooks : useRef()

✔️ useRef, 언제 사용할까?

useRef는 크게 DOM 요소에 접근하는 경우, 렌더링을 일으키지 않고 값을 변경시키는 두 가지 경우에 사용합니다.

Vanilla JavaScript로 특정 DOM 요소에 접근하고자 하는 경우에는 getElementById 혹은 querySelector 같은 함수를 사용하였는데요. 리액트에서는 useRef라는 Hook를 사용하거나, 콜백 함수 혹은 React.createRef(클래스형 컴포넌트) 라는 함수를 사용합니다.

✔️ useRef 사용법

import { useRef } from 'react';

useRef를 사용하기 위해서는 가장 먼저 react에서 useRef를 import 받아야 합니다.

기본 형태는 아래와 같습니다.

//Ref 객체 생성
const ref = useRef();

//current -> DOM 가리킴. 아래의 경우는 <input /> 태그 DOM을 가리킨다.
nameInput.current.focus();

//접근하고 싶은 태그에는 ref 속성을 준다.
<input name="lime"
  placeholder="focus!!"
  onChange={onChange}
  value={value}
  ref={nameInput}
/>

✔️ 예시

function Sample() {

  const nameInput = useRef();

  //포커스 잡기
  const onFocus = () => {
    nameInput.current.focus();
  };

  return (
        <div>
          <input name="lime"
            placeholder="focus!!"
            onChange={onChange}
            value={value}
            ref={nameInput}
          />
          <button onClick={onFocus}>포커스</button>
        </div>
  );
}

위 예시는 useRef를 사용하여 포커스 버튼을 눌렀을 때 해당 input에 포커스가 잡히도록 한 것입니다.

✔️ 변수 관리

useState를 사용하여 변수를 상태값으로 관리하게 되면 값이 바뀔 때 마다 컴포넌트가 렌더링 되는데, useRef를 사용하여 변수를 관리한다면 컴포넌트가 리렌더링 되지 않습니다. 또한 상태로 관리하는 경우에는 상태를 바꾸는 함수를 호출한 다음 렌더링 하고 나서 업데이트 된 상태를 조회할 수 있는데, useRef를 사용하는 경우에는 설정 후 바로 조회하는 것이 가능합니다. 더불어 useRef로 만들어진 변수는 React의 전역 저장소에 저장되기 때문에 함수를 다시 호출하더라도 마지막으로 업데이트한 current 값이 유지됩니다.

const nextId = useRef(3);
const onCreate = () => {
  nextId.current += 1;
};

해당 기능이 유용하게 사용되는 경우

• setTimeout, setInterval을 통해 만들어진 id
• scroll 위치
• 외부 라이브러리를 사용하여 생성된 인스턴스

Today I Learned

React에서 특정 DOM을 가리키는 경우에 useRef를 사용한다는 것과, 어떤 식으로 사용되는지에 대해 알게되었습니다 :)

참고사이트

https://react.vlpt.us/basic/10-useRef.html
https://ko.reactjs.org/docs/hooks-reference.html#useref

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)