2022-02-14 DOM reference를 잘 활용할 수 있는 useRef

intro

 

지금까지 React를 공부하면서 익히셨던 내용을 돌이켜보면

React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었음.

DOM 지식이 필요 없다고 생각하실지도 모르겠지만

React로 모든 개발 요구 사항을 충족할 수는 없음

아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우가 있음.

 

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있음.

아래 예시 코드처럼 작성하시면 주소값을 활용할 수 있음.

 

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>
  );

- 이 주소값음 컴포넌트가 re-render 되더라도 바뀌지 않음.

 

이 특성을 활용하여 아래의 제한된 상황에서 useRef를 활용할 수 있음

 

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

- 제시된 상황 제외한 대부분의 경우 기본 리액트 문법을 벗어나 useRef를 남용하는 것은 부적절하고

React의 특징이자 장점인 선언적 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 함.

아래 Action Item을 보고 useRef가 어떻게 활용되고 있는지 익혀보자.

 

 

Action Item 1 : focus

 

 

Action Item 2 : media playback