S3 unit3 | [React] useRef로 DOM 직접 조작하기

📌 useRef

: 요소의 주소값을 담아 사용할 수 있게 돕는 함수

DOM 노트, 엘리먼트, React 컴포넌트 주소값 참조 가능

 

언제 사용할까?

• ref를 생성하는 방법에는 createRef도 있지만 이는 함수형 컴포넌트에서 작동하지 않음
  
  • 따라서 함수형 컴포넌트일 때 useRef 사용
• 상태를 관리하며 리렌더링 되지 않게 하고 싶을 때 (동영상 재생 바를 리렌더링 하면 안 됨)
• 리렌더링 되어도 동일한 참조값 유지할 때 사용

 

사용방법

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>);

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}

ref변수.current

: 주소가 담기는 프로퍼티

 

focus(), blur()

:  현재 사용자가 클릭하여 선택된 항목 => 포커싱 된 항목

focus()로 포커싱할 수 있음

blur()로 항목에서 포커스를 빼앗을 수 있음

 

 

useRef 남용하는 것은 React의 특징인 선언형 프로그래밍 원칙에 위배되기 때문에 조심하여 사용해야 함.