JavaScript 를 사용 할 때, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 선택한다.
리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다.
예를 들면, 특정 엘리먼트의 크기를 가져오거나, 스크롤바 위치를 가져오거나 설정하는 등,
정말 다양한 상황이 있을 것이다. 그럴 땐, 리액트에서 ref 라는 것을 사용한다.
함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용한다.
<input
name="inputBTN"
value={name}
ref={nameInput}
/>위의 코드처럼 ref에 변수를 주고,
const nameInput = useRef();
console.log(nameInput.current.name); // 'inputBTN'위 코드처럼 변수에 useRef()를 주면 콘솔 로그를 찍었을 때 input코드의 name부분이 출력된다.
이렇게 DOM을 선택할 수 있다.
