React를 이용해서 거의 대부분의 프론트엔드 요구사항을 구현할 수 있지만, 모든 개발 요구 사항을 충족할 순 없다. 특히 아래처럼 DOM 엘리먼트의 주소값을 활용해야 하는 예외적인 경우에는 DOM 지식이 필요하다.
하지만 이런 예외적인 상황에서 React Hook 중 하나인 useRef
를 이용해 DOM 노드, 엘리먼트 그리고 리액트 컴포넌트 주소값을 참조할 수 있다. 아래의 예시를 통해 어떻게 주소값을 활용할 수 있는지 살펴보자.
const 주소값_담는_그릇 = useRef(참조자료형) return ( <div> <input ref={주소값_담는_그릇} type="text" /> /* React에서 사용 가능한 ref라는 속성에 주소값_담는_그릇을 값으로 할당하면 주소값_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담긴다. 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있다. */ </div>
이 주소값은 컴포넌트가 재렌더링(re-rendering) 되더라도 바뀌지 않는다. 이 특성을 활용해 아래의 제한된 상황에서 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의 특징이자 장점인 선언적 프로그래밍 원칙과 배치되기 때문에, 유의해서 사용해야 한다.
아래 예시 코드를 보고 useRef
가 어떻게 활용되는지 익혀보자.