[React] React Hook - useRef

useRef 사용하기

const ref = useRef(value);

ref 의 초기값은 useRef에 선언하며,

ref 는  {current: value}  의 형태로 저장된다. 해당 객체는 수정이 가능하기 때문에 언제든 바꿔줄 수 있다!

그리고 컴포넌트가 unmount 되기 전까지는 값을 유지한다.

 

useRef는 변경 가능한 객체를 반환한다.

반환된 객체는 useRef의 인자를 current 라는 속성에 저장한다.

반환 객체는 컴포넌트가 unmount 될 때 까지 지속된다.

 

useRef 는 

Ref 가 변해도 re-render 되지 않으며, re-render 되어도 Ref는 유지된다.

값이 아무리 바뀐다고 해도 렌더링이 일어나지 않기 때문에 성능적인 부분에서 유리하다.

사용 예시

1. 저장공간

state 대신 값을 저장한다.

불필요한 렌더링을 막을 수 있으며, 컴포넌트가 다시 렌더링 되어도 값에는 변화가 없다는 장점이 있다.

 

state 로 선언한 변수는 컴포넌트가 렌더링 되면 값이 초기화 된다.
반면, Ref 로 선언한 변수는 컴포넌트가 다시 렌더링 되더라도 값이 변하지 않는다.

Ref 는 컴포넌트의 모든 생의 주기를 함께하기 때문에 컴포넌트가 unmount 될 때 까지 값을 유지할 수 있다.

알고 가면 좋을 Tip!
렌더링된 횟수를 state 로 선언한 변수로 계산하게 된다면 무한루프에 빠지게 된다.
렌더링을 하며 state 의 값을 증가시키며 다시 렌더링이 발생하고, 그에 대한 렌더링이 또 발생하기 때문이다.

이때 Ref 를 사용하게 된다면 컴포넌트가 업데이트되며 발생한 렌더링에 값이 변하지 않아 이러한 무한루프를 해결할 수 있다.

 

2. DOM 요소에 접근

접근하고자 하는 요소의 태그에 ref 속성으로 넣어주게 되면 해당 요소에 접근할 수 있게 된다.

ex) input 요소에 focus 주기: 로그인 페이지 아이디 입력창에 자동 focus

import { useEffect, useRef } from "react";

export default function UseRefDom() {
  const inputRef = useRef();

  // 모든 렌더링마다 작동시키기 위해 useEffect deps 에는 빈배열을 넣는다.
  useEffect(() => {
    inputRef.current.focus() // 렌더링이 될 때 마다 해당 input 에는 자동 focus가 된다!
  }, [])

  return <input ref={inputRef} />;
}

 

참고로 값에 접근할 때는

inputRef.current.value

의 형태로 접근하면 된다.

 

모든 예제는

https://mirro97.github.io/react-playground-result/

React App

 

이곳에서 직접 실행시켜볼 수 있다.

 

 

코드는 깃허브에 올려 놨으니 이곳을 참고하면 된다 🤗

https://github.com/mirro97/react-playground/tree/main/src/component

GitHub - mirro97/react-playground