DOM reference를 잘 활용할 수 있는 useRef

React만을 가지고 대부분의 프론트엔드 요구사항을 구현할 수 있지만 React가 모든것을 충족하진 못한다. 

DOM 엘리먼트의 주소값을 활용해야하는 경우가 있다.

 

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

 

- 컴포넌트에서 특정 DOM을 선택해야 할 때, ref를 사용해야 한다. 그리고 함수형 컴포넌트에서 이를 설정할때 useRef를 사용하여 설정해야한다.

- useRef으로 DOM노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다. 

 

 

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있다.

return (
	<div>
    	<input ref ={주소값을_담는_그릇} type = "text" />
	</div>
)

🗣   React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면
          주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담긴다. 
           향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있다.

 

🎟 useRef의 역할

•  컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리한다. 
•  useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.

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

useRef()를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다

그리고 이 값을 수정할 경우 .current 값을 수정하면 되고 조회할 경우 .current를 조회하면 된다.