useRef()

🔥함수형 컴포넌트 기반으로 정리를 했습니다!

 

• ref는 다른 DOM 요소에 접근하고 조작할 수 있게 해준다.
• 리액트 16.3 버전 이상에서는 함수 컴포넌트에서 useRef 훅을 사용하여 ref를 생성할 수 있다.

1. 리액트가 JSX 코드를 렌더링 할 때, ref 객체에는 실제 DOM 요소나 컴포넌트의 인스턴스가 저장된다.
2. 저장된 값은 항상 객체이고, current 속성을 가지고 있다.
3. current 속성은 ref가 연결된 실제 값을 갖는다.
4. 어떤 HTML 요소에도 추가할 수 있는데, 입력 필드 내용을 가져오기 위해 주로 input에 많이 사용한다.

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
	const myInputRef = useRef();

	useEffect(() => {
		myInputRef.current.focus();
	}, []);

	return <input ref={myInputRef} />;
}

 

• 콘솔찍으면 {current: input#myInputRef} 반환한다.
• input#myInputRef은 ref 속성 적용한 요소 => 실제 DOM 노드 반환하는 것!
• nameInputRef.current.value로 접근해서 값을 사용할 수 있다.

 

 

🌀 DOM은 리액트에 의해서만 조작되는 게 좋다.

React는 Virtual DOM을 활용하여 성능 최적화를 이루기 위해 DOM 조작을 추상화하는데, 직접 DOM을 조작하면 React의 성능 이점을 잃을 수 있고, 일관성 있는 상태 유지가 어려워질 수 있다.

 

🌀 키 입력 시 최종 입력값만 ref로 접근해서 가져올 수 있다.

키 입력 이벤트는 state로 이벤트 처리할 수 있지만, 입력값이 변경될 때마다 컴포넌트가 리렌더링되고 UI가 업데이트되기 때문에 과부하가 걸릴 수 있다.

 

 

결론 📌값만 읽고 싶다면 ref가 더 낫다. 단, DOM을 조작한다는 예외적인 일을 하기 때문에 주의해서 사용해야 한다.