React | Ref (+useRef)

React

목차

1. Ref
2. useRef

1. Ref(reference)

:render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함(특정 컴퍼넌트를 접근하는 데에 사용하는 props)

1. ref 사용하는 경우
   • 자식 컴퍼넌트를 직접 접근하여 수정할 때 : 함수형 컴포넌트에서 사용할 수 없음(리액트에서 지양하는 방법)
   • DOM 엘리먼트를 접근하고 싶을 때 : 특정 엘리먼트 DOM 에 접근해서, 해당 dom의 이벤트를 실행시키거나, 특정 attribute 들에 접근(일반적인 방법으로 컨트롤하기 힘든 경우)
     
     

2. ref 바람직한 사용 사례

   • 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
   • 애니메이션을 직접적으로 실행시킬 때
   • 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
   예시코드

   // 특정 엘리먼트의 바깥이 클릭됐을 때 원하는 함수가 실행되도록 하게 하는 훅
   // ref 를 이용해서, 클릭 이벤트 발생 시 , 해당 ref 를 가지고 있는 컴퍼넌트가 click 이벤트에 포함된 엘리먼트인지 확인
   const useOutsideClick = ({ onClickOutside }) => {
   const ref = useRef(null);
   
   const handleClick = useCallback(
       e => {
       const inside = ref.current.contains(e.target);
       if (inside) return;
   
       onClickOutside();
       },
       [onClickOutside, ref]
   );
   
   useEffect(() => {
       document.addEventListener("click", handleClick);
   
       return () => document.removeEventListener("click", handleClick);
   }, [handleClick]);
   
   return ref;
   };
   
   //h2 엘리먼트에 ref라는 속성으로 ref를 넣어줌
   const Use() => {
   const ref = useOutsideClick({ onClickOutside : () => {
       console.log("outside 가 클릭되었음!");
   });
   
   return (
       <div>
       <h2 ref={ref}>
           inside
       </h2>
       </div>
   );
   }
   

2. useRef

:DOM 요소를 조작하기 위해 사용하는 hook 함수(VanilaJS의 querySelector나 getElementById와 유사)

1. useRef란?

   • .current 프로퍼티에 변경가능한 값을 담고있는 객체
   • .current프로퍼티를 변경하더라도 리렌더링을 유발하지 않음(ref 객체 안의 값은 리액트 생명주기에 독립적이기 때문)

   • 매번 렌더링을 할 때 동일한 ref 객체를 제공함

     예시코드

     import React, { useRef, Component } from "react";
     
     class RefSample extends Component {
     input = useRef();
     
     handleFocus = () => {
         this.input.current.focus();
     };
     
     render() {
         return (
         <div>
             <input ref={input} />
         </div>
         );
     }
     }
     
     export default RefSample;
     

     
     

2. useRef를 이용한 변수들이 사용되는 예시

   • setTimeout, setInterval 을 통해서 만들어진 id
   • 외부 라이브러리를 사용하여 생성된 인스턴스
   • scroll 위치 → 변화에 따라 리렌더링을 매번 일으킬 필요가 없는 경우 주로 사용(ref.current로 인터렉션 동작들을 세세하게 구분함)

---

출처

ref
useRef