[React] 7. 함수형 컴포넌트에서 ref 활용하기

잘못 된 내용에 대한 지적은 언제든 환영입니다.

useRef Hook의 두 기능

import { useRef } from 'react';

1. 특정 DOM 선택
   기존에 자바스크립트에서 getElement를 사용하는 것처럼, React 또한 ref를 사용하여 특정 DOM을 선택할 수 있다.
2. 변수 역할
   state와는 달리 평범한 변수처럼 사용할 수 있다. 리렌더링 없이 업데이트 된 값을 조회할 수 있는 변수를 만들 수 있으며, 당연히 불변성 또한 지킬 필요 없다.

1. ref로 특정 DOM 선택하기

1. 특정 변수를 useRef Hook을 통해 ref 객체로 만든다. 인자로는 null을 넘겨주어 초기화해준다.

const inputRef = useRef(null);

2. 해당 컴포넌트의 JSX 코드 내에서 제어하려는 DOM에 ref 속성을 지정하고, 속성의 값은 위에서 만든 ref 객체가 할당 된 변수를 넣어준다.

return (
  ...
  <input name="example_input" ref={refVal} {...rest} />
  ...
);

3. 필요에 따라 해당 DOM을 조작할 수 있으며, current 키가 해당 DOM을 가리킨다.

refVal.current.focus(); // example_input에 포커스 지정

refVal.current.value = "Hello World!"; // example_input의 value를 변경

2. ref를 변수로 활용하기

• 특정 변수를 useRef Hook을 통해 ref 객체로 만든다. 인자로는 변수의 초기 값으로 지정할 값을 넣어준다.

const varRef = useRef(0);

• 변수값은 ref 객체의 current 키가 가리킨다.

console.log(`결과값 : ${varRef.current}`) // 결과값 : 0

• 수정하더라도 리렌더링이 되지 않으며, 리렌더링 없이도 최신 값을 언제든지 조회할 수 있다.

varRef.current += 1;
console.log(`결과값 : ${varRef.current}`); // 결과값 : 1

References
"10. useRef 로 특정 DOM 선택하기" .velopert
"12. useRef 로 컴포넌트 안의 변수 만들기" .velopert