[React] useRef 알아보기

💡 useRef

참고영상
https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3
https://www.youtube.com/watch?v=EMK8oUUwP5Q&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=4

useRef 는 React 함수 컴포넌트에서 DOM 요소에 직접 접근하기 위해 사용되는 React 훅(hook)이다. 여기서 Ref는 reference 참조를 뜻한다.

 

함수형 컴포넌트에서 useRef 를 부르면 ref 오브젝트를 반환해준다.

const ref = useRef(value)

// ref 오브젝트: { current: value }

우리가 인자로 넣어준 초기값 value 는 ref 안에 있는 current 에 저장됨

그리고 ref 오브젝트는 수정이 가능해서 우리가 원하는 값으로 바꿀 수 있음

const ref = useRef("react") → { current: “react” }
const ref = useRef("hello") → { current: “hello” }

 

반환된 ref 는 컴포넌트의 전 생애주기를 통해 유지된다.

즉, 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 unmount 되기 전까지 값을 그대로 유지할 수 있다.

 

 

---

 

❓ useRef 는 언제 사용할까?

1. 저장공간

ref 는 state 와 비슷하게 어떤 값을 저장해두는 저장공간으로 사용된다.

 

값을 state 에 저장해두면?

state 값이 변경될 때마다 컴포넌트가 렌더링 되고 컴포넌트 내부에 있는 모든 변수들이 초기화 됨.

그러면 우리가 원하지 않는 렌더링이 발생할수도 있음.

 

값을 ref 에 저장해두면?

ref 는 값이 변경되도 컴포넌트가 리렌더링 되지 않음 → 불필요한 렌더링을 막을 수 있음.

그리고 컴포넌트가 렌더링이 되어도 ref 안에 저장되어 있는 값은 변하지 않음.

 

 

2. DOM 요소에 접근

자바스크립트에서 특정 DOM 을 선택하기 위해서 사용했던 querySelector( ) 와 비슷하다.

 

input 에 focus( )를 줄 때 많이 사용하는데,

<input ref = {ref} /> 이렇게 ref 속성으로 넣어주면 된다.

 

 

---

 

❓ 간단한 예제

import React, { useEffect, useRef } from 'react';

function FocusInput() {
  const inputRef = useRef();

 useEffect(() => {
 	// input 요소에 포커스를 주는 메소드
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input 
        ref={inputRef}
        type="text" 
        placeholder="포커스!"
      />
      <button>입력</button>
    </div>
  );
}

export default FocusInput;

코드 설명

1. useRef 를 사용해서 inputRef 변수 생성
2. useEffect 를 사용해서 초기 포커스 설정
   • inputRef 객체의 current 속성을 사용해서 DOM 의 input 요소에 접근하고 포커스 설정
3. input 요소의 ref 속성
   • input 요소에 ref 속성을 사용해서 useRef 로 생성한 inputRef 변수 연결

 

예제 실행 결과

새로고침하면 자동으로 input 요소에 포커스 되는 것을 확인할 수 있음

 

 

---

 

⚠ 주의사항

useRef 의 값은 무조건 useRef.current = newValue 와 같이 current 에 접근해서 직접! 변경해야 됨.

useRef(newValue) 이런식으로 업데이트 불가능

 

 

---

 

✅ 요약

1. useRef 는 React DOM 요소에 직접 접근할 수 있게 해주는 훅이다.
2. useRef 를 사용해서 변수를 생성하면, 해당 변수는 컴포넌트의 생명주기 동안 유지되고, 리렌더링 되어도 값이 변경되지 않는다.
3. useRef 로 생성한 변수는 { current : value } 형태의 객체를 반환한다. 이때, current 속성에 접근해서 변수의 값을 읽거나 조작할 수 있다.
4. useRef 는 주로 포커스 설정 등에서 활용된다.