useRef
- target DOM nodes/elements
- DOES NOT trigger re-render
- Imperative
Life cycle
ref는 componentDidMount나 useEffect가 실행되기 전에 할당됩니다.
컴포넌트가 마운트 될 때 할당되며, 언마운트 될 때 Null을 할당합니다.
1. Target DOM
-
리액트 컴포넌트 혹은 DOM 조작이 가능해진다.
-
ref를 통해 DOM 객체에 대한 참조 주소를 반환받는다.
const inputRef = useRef<HTMLInputElement>(null);
// ref객체 (plain JS object) 초기화
// {current: null}
return <input type="text" ref={inputRef} />
// Ref 객체를 target DOM의 ref 속성 값으로 설정
...
console.log(refContainer.current); // <input type="text">
2. NOT trigger re-render
- useRef의 값이 바뀌어도 컴포넌트가 re-render 되지 않는다.
- ref 객체의 속성값이 바뀌는 것이기 때문에, 값의 변경으로 인해 객체의 참조 주소가 바뀔 일이 없다.
- ref객체 속성값은 React에 의해 기억된다. Math.random()으로 선언한 값이 컴포넌트가 리렌더링된 후에도 유지되는 것을 볼 수 있음
- 렌더링 없이 변경이 필요한 데이터를 관리할 수 있다.
3. Ref를 사용할 때
공식문서에서 권장하는 Ref의 바람직한 사용 사례는 다음과 같다.
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
- 애니메이션을 직접적으로 실행시킬 때
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
form 컴포넌트에서의 사용
대부분 경우에 React에서 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋습니다.
- form 컴포넌트는 제어(state 사용) or 비제어(ref 사용) 방식으로 입력값을 얻을 수 있다.
- 제어 컴포넌트 : React에 의해 값이 제어되는 입력 폼 엘리먼트
const [state, setState] = useState("");
...
const handleChange = (event) => {
setState(event.target.value);
}
const handleSubmit = (event) => {
event.preventDefault();
console.log(state);
}
...
<form className="form" onSubmit={handleSubmit}>
<input type="text" value={state} onChange={handleChange}>
</form>- 비제어 컴포넌트 : DOM 자체에서 폼 데이터가 다뤄짐
- target DOM에 접근하여 원하는 이벤트를 달 수 있음
useEffect(() => {
refContainer.current.focus();
});
...
<input type="text" ref={refContainer} />Imperative(명령형) 패러다임
선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.
예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.
- React는 기본적으로 Declarative(선언형) 패러다임을 따른다. "즉, 뷰의 동작에 대해 하나씩 명시하는 것이 아닌, state나 props의 변경에 따라 변하는 뷰를 선언하는 방식으로 개발된다."
- 하지만, Ref 기능의 경우 기능을 조작하기 위해 Imperative(명령형) 패러다임을 따른다.
ref.current.focus()
// focus하는 기능을 명령적으로 명시
Life is Egg..🥚🐣🌟