안녕하세요. React Hook의 useRef에 대해 알아보고자 합니다.
Ref란?
이 녀석은 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해줍니다. ref가 무엇일까요? React 공식문서에서는 이렇게 말하고 있습니다.
Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.
결론적으로 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경이 가능한 ref 객체를 반환합니다.
어떠한 경우에 사용하면 좋을까요?
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
Ref를 사용해서는 안되는 경우?
그러나 선언적으로 해결될 수 있는 문제는 사용을 지양하라고 밝히고 있습니다.
사용하기 바람직한 케이스가 많다고 해도 남용해서는 안되겠죠?
ref는 애플리케이션에 “어떤 일이 일어나게” 할 때 사용될 수도 있습니다. 그럴 때는 잠시 멈추고 어느 컴포넌트 계층에서 상태를 소유해야 하는지 신중하게 생각해보세요. 대부분의 경우, 상태를 소유해야 하는 적절한 장소가 더 높은 계층이라는 결론이 날 겁니다.
useRef를 사용하며 익혀보자!
테스트를 위해서 다음과 같은 코드를 작성해주세요.
import React, { useRef } from 'react';
export function Test() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}inputEl 변수에 useRef(null)을 선언해주었습니다.
우선 Ref.current 함수가 반환되고 렌더링이 되기 전까지 어떠한 ref도 지정되어 있지 않기 때문에 초기값을 null로 설정해주었습니다.
또한 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자 역할을 합니다.
이 때, 버튼을 클릭하면 실행할 함수인 onButtonClick을 보면 변경되는 DOM에 접근하고자 하는 .current가 있고 그 element를 focus해주는 기능을 담고 있습니다.
JSX에서 버튼에 함수로 지정해주었고, <input />에는 ref를 inputEl로 지정하여 값이 바뀌고 버튼을 눌러 렌더링이 진행되면 autoFocus를 잡게 해주는 것입니다.
useRef에 대한 사용 설명 마치겠습니다.
다음 포스팅에서는 커스텀 Hooks에 대해 알아보겠습니다!
