React에서 DOM을 위한 useRef 훅 사용법

이전 강의 중 하나에서 우리는 ref가 가장 흔히 DOM 요소에 접근하기 위해 사용된다는 점을 언급했습니다.

예를 들어, 요소에 포커스를 맞추거나, 스크롤을 하거나, 그 크기와 위치를 계산해야 할 때, 혹은 요소의 메서드나 속성을 사용해야 할 때 ref가 도움이 될 것입니다. React에는 이러한 것들을 위한 내장 메서드가 없기 때문입니다.

입력 필드 예제를 통해 이것이 어떻게 수행되는지 살펴보겠습니다. 입력 필드와 버튼이 있는 컴포넌트를 만들어 보겠습니다:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

먼저, 컴포넌트에 useRef를 가져옵니다:

import { useRef } from 'react';

그리고 컴포넌트 내에서 ref ref를 생성합니다. null 값으로 초기화합니다:

const ref = useRef(null);

버튼에 클릭 핸들러를 부착합니다:

<button onClick={handleClick}>focus</button>

입력 필드에 접근하기 위해, 우리의 ref ref를 입력 필드의 ref 속성에 기록합니다. 이렇게 하면, React가 이 입력 필드에 대한 DOM 노드를 생성할 때, 그 참조를 ref.current에 넣게 되고 우리는 입력 필드의 메서드를 사용할 수 있습니다:

<input ref={ref} />

마지막으로, 버튼 클릭 시 입력 필드에 포커스가 맞춰지도록 클릭 처리 함수를 추가하겠습니다. 이제 우리는 ref를 통해, 즉 우리 입력 필드에 대한 참조가 저장된 ref를 통해 그 메서드 focus에 접근하여 이 작업을 수행할 수 있습니다:

function handleClick() {
	ref.current.focus();
}

버튼을 클릭해 보고 입력 필드에 포커스가 맞춰지는지 확인하세요.

이번 강의에서 작성한 App 컴포넌트의 코드를 가져와서 버튼 클릭 시 입력 필드에 포커스를 맞추는 것 외에도 입력 필드가 지워지도록 만들어 보세요. 입력 필드의 value 속성을 사용하여 이를 수행하세요.