DOM 조작을 할 수 있게 해주는 "useRef"

컴포넌트의 속성 값을 불러올 수도 있고, value나 style 값 같은 것들을 바꿔줄 수도 있는. DOM을 조작할 수 있게 해주는 ref.

렌더링에 필요하지 않은 값을 참조할 수 있는 ref.

에 대하여 설명하도록 하겠다.

​

ref 는 비교적 간단한 개념이므로 forwardRef 와 useImperativeHandle 를 설명하기 위한 도약 단계처럼 가볍게 짚고 넘어가도록 하겠음.

​

덧붙히는 말..

모 부장의 "Ref 는 React 생명주기와 어울리지 않는 문법으로 React 상에서도 지양해야 한다"는 발언에 대하여 설명하도록 하겠다.

Ref 를 무분별하게 선언하고, 다른 문법으로 대체가 가능한데도 불구하고 무지성으로 사용하는 것이 문제. (이것은 다른 문법도 동일하다. 각자가 가지는 고유의 특성을 이해하고 사용해야 함.)

해당 내용에 대하여 답변하자면,

 

React 공식 문서

useRef – React

 

그 어디에도 사용을 지양하라는 단어와 늬앙스는 없으므로, 공식 문서 상의 설명에서 볼 수 있듯 "선언적으로 해결될 수 있는 문제의 경우 ref를 사용하는 것을 지양해라"가 정확한 답변이 되겠다.

아래는 ref.current.value 로 받아올 법한 데이터를 state 로 처리해준 예제.

 

function AnyComponent() {
	const [inputs, setInputs] = useState({
		email: '',
		password: '',
        nickname: '',
	});
  	const emailRef = useRef();
	const onChange = (e: ChangeEvent<HTMLInputElement>) => {
		const { name, value } = e.target;
		setInputs({
			...inputs,
			[name]: value,
		});
	};
  	const onReset = () => {
    	setInputs({
          email: '',
		  password: '',
          nickname: '',
        })
      emailRef.current.focus();
    }
  	return (
    <>
      <input name='email' ref={emailRef} onChange={onChange}/>
      <input name='password'onChange={onChange}/>
      <input name='nickname'onChange={onChange}/>
      <button onClick={onReset}>Reset</button>
    </>
  );
}

 

흔히 ref 를 사용하여 value 를 저장해주는 case 는 이런식으로 선언해주면 된다.

 

 

REF를 언제 사용하면 좋을까?

1. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리해야 할 때.
2. 애니메이션을 코드 어떤 로직을 통하여 직접적으로 실행시킬 때
3. 특정 컴포넌트의 리렌더링을 방지해야 할 때

 

사용방법

import { useRef } from 'react';
/* 1. 사용할 수 있도록 훅을 불러온다. */

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  /* 2. inputEl은 특정 엘리먼트의 주소값을 담는 변수가 된다. */
  
  const onButtonClick = () => {
    inputEl.current.focus();
    /* 4. 해당 함수가 실행되면, inputEl이 가지고 있는 
      주소값(input)이 focus된다. */
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
    /* 3. 특정 태그에 ref 속성을 붙이고 미리 할당했던 useRef 객체를 
넣으면, 해당 태그의 주소값을 inputEl이라는 변수가 가지고 있게 된다. */
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}

​

 

---

​공식 문서를 읽거나 개발하며 느꼈던 뇌피셜로 작성하고 있으니, 
궁금하신 점이나 잘못된 점이 있다면 댓글 남겨주시면 감사하겠습니다.