React의 ref에 대해서 알아보자

ref란?

• ref는 React와 DOM을 연결하는 역할을 한다.
  • ref의 current 속성에 DOM 요소를 직접 반환한다.
  • 사용자는 pure javascript 처럼 DOM의 요소에 직접 접근할 수 있다.
  • 즉, javascript의 document.getElementsById()와 비슷하다.
• 그렇다면 document.getElementsById() 같은 DOM API 쓰면 안될까?
  • DOM API는 전역적으로 동작해서, 같은 id를 가지는 DOM 요소가 여러개 생길 수 있다.
  • ref는 컴포넌트 안에서만 동작하기 때문에 안전하다.

---

ref는 언제 사용할까?

• React가 '도저히' 할 수 없는 일을 할때, 신중하게 사용한다.
  • 특정 input에 focus 주기
  • canvas에 직접 그림 그리기 등...
• ref로 조작하는 요소는 react에 의해 제어되지 않는 uncontrolled 요소이기 때문이다.

---

ref를 적용해보자

ref를 선언한다.

import { useRef } from 'react';

const Component = (props) => {
	const nameInputRef = useRef();
  	...

JSX의 input에 ref를 연결한다.

<input
	id="username"
    type="text"
    ref={nameInputRef}
/>
...

필요할 때, ref를 참조한다.

const addUserHandler = (event) => {
  // nameInputRef.current가 <input> 요소를 반환한다.
  const enteredInput = nameInputRef.current.value;
  ...
  
  // 직접 value를 수정할 수도 있다.
  nameInputRef.current.value = '';
};