useRef() 사용하기

useRef()

react의 getElementId
즉 HTML태그에 접근하는 것을 도와주는 역할

사용되는 경우는 크게
1) 특정 DOM 선택하기
2) 컴포넌트 안의 변수만들기
3) 리렌더링 방지하기

<input
	ref={inputEl}
	id="fileTag"
	type="file"
	onChange={readImage}
></input> 

const handleFileBtn = () => {
		inputEl.current.click();
	};

이렇게 작성하게 되면 버튼을 클릭한 것이 인풋태그를 클릭한 것과 같은 결과가 나옴

Input.current.focus();
: Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.
그리고 포커싱을 해주는 DOM API focus() 를 호출한다.

실습을 할 때는 인풋태그에 히든을 걸어두고 이미지 창을 클릭하면 인풋태그를 클릭한 것과 같은 결과값을 나타내었음

하지만 React 공식 홈페이지에 나온
Ref의 바람직한 사용 사례를 보면

1) 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
2) 애니메이션을 직접적으로 실행시킬 때.
3) 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
라고 한다.

출처: https://ko.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs