[React] ref, useRef

ref?

• JS를 사용할 때에는 특정 DOM을 선택해야하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택
• 리액트를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황이 생기면 ref를 활용
• 함수형 컴포넌트에서 **ref**를 사용 할 때에는 **useRef** 라는 Hook 함수 사용
• 클래스 컴포넌트에서는 콜백 함수를 사용하거나 **React.createRef 라는 함수 사용**
• 포커스를 잡으려면 nameInput.current.focus() 형태로 작성

const nameInput = useReft();

const onClick = () => {
    nameInput.current.focus();
}

return(
    <input ref={nameInput} />
    <button onClick={onClick}>클릭</button>
)

useRef?

• 리랜더링 하지 않고, 컴포넌트의 속성만 조회 & 수정
  • 컴포넌트에 focus를 위치시킬 필요 있는 경우
  • 속성 값을 초기화할 필요가 있는 경우
  • useRef로 컴포넌트 안의 변수 관리

const refContainer = useRef(initialValue)

• useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환
• 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”
• useRef는 내용이 변경될 때 알려주지는 않음
• .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않음

Reference

Hooks API Reference - React

10. useRef 로 특정 DOM 선택하기

[React] useRef() 는 언제 사용하는가?