React] Hook : useRef

useRef

useRef를 사용하면 값을 참조하거나 DOM에 접근하여 태그를 조작할 수 있습니다.

const ref = useRef(초기값);

 

 

---

 

 

값을 참조하는 Ref

ref는 state가 아니라 일반 JS객체이기 때문에 변경시점을 인식하지 못합니다.

따라서 화면에 그려지는 것에 관여하기보다는 정보를 저장하는데 적합하며, 리렌더링 사이에 값을 저장해 놓을 수 있습니다.

 

지역 변수와는 다르게 리렌더링 될 때 값이 초기화되거나 변하지 않고, 직접 값을 변경해주어야 합니다.

ref를 통해 접근할 때는 ref.current를 사용하면되고, 모든 타입의 값이 될 수 있습니다.. (boolean, string, number 등..)

 

 

---

 

 

예

 

 

alert으로 뜨는 ref.current는 카운트가 증가하는 걸 확인할 수 있으나,

span태그에 있는 ref.current는 값이 0으로 변하지 않는 모습을 확인할 수 있습니다.

(state가 바뀐 게 아니기 때문에 화면이 리렌더링 되지 않음)

 

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

function handleStopClick() {
  const intervalId = intervalRef.current;
  clearInterval(intervalId);
}

 

위와 같이 다른 함수에서 같이 사용할 수 있습니다.

 

 

---

 

 

DOM을 조작하는 ref

일반적으로 DOM을 조작하는데 사용합니다. (style, focus, video객체 등)

 

 

---

 

 

예

 

input태그 속성에 ref를 넣어주어 DOM에 접근할 수 있게 해줍니다..

button을 클릭하여 onClick을 실행해 주면 input태그에 focus가 잡히는 걸 확인할 수 있습니다.

ref를 제거하려면 null값을 넣어주면 됩니다.

 

 

 

ul태그에 ref를 설정해 주고, querySelectorAll를 사용하여 하위태그에 접근하여 스크롤을 이동할 수 있습니다.

 

 

Tip

재생성 방지

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

 

new VideoPlayer가 초기 렌더링에만 사용되지만, 렌더링 될 때마다 계속 호출하게 됨으로써 메모리가 낭비하게 됩니다.

 

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...

초기값을 null로 주고, ref.current에 new Videoplayer를 대입해 줌으로써 개선될 수 있습니다.

 

 

Props로 ref 전달하기

자식 컴포넌트의 함수를 정의할 때, forwardRef로 감싸서 사용하면 ref를 props로 받아서 사용할 수 있습니다.

import { forwardRef } from 'react';

const MyInput = forwardRef((ref) => {
  return (
    <input ref={ref}/>
  );
});

export default MyInput;

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

 

 

---

 

 

Flag변수처럼 사용할 수 도 있고, 조건에 따라 style을 변경할 수 도 있고, 다양하게 활용할 수 있는 hook입니다.