useRef 활용법

UseRef의 current?

1. 정의

   • 컴포넌트 내에서 mutable한 객체를 만들어 사용 할 수 있다.
   • ref Object의 추가된 값은 current 키의 값으로 업데이트된다.
   • mutable한 객체는 자바스크립트 Heap객체처럼 사용가능하다
   • React는 상태가 변경되면 렌더링이 되고나서 상태의 값을 알 수 있기떄문에 불필요한 렌더링을 막을수 있다.
   • 컴포넌트 안에서 조회 및 수정 할 수 있다(생명주기 포함)
   • 리엑트는 변경상태를 감지하지 않는다.(값 - mutable object)이 변경되도 리렌더링 되지 않는다.)

2. 사용법

   1. DOM 선택

      • input태그의 ref property에 넣으면 ref.current 객체안에 input에 대한 속성이 입력된다.
      • ref.current안에는 input에 대한 이벤트 / 속성이 있어 focus()같은 처리를 할 수 있다.

      const Focus = () => {
          const InpuRef = useRef()
          const getFocus = () => {
              InpuRef.current.focus()
          }
          return (
              <>
                  <button onClick={getFocus}>Focus</button>
                  <input type="text" ref={InpuRef} />
              </>
          )
      }

   2. 클래스의 Instance filed 처럼 사용

      • useRef()의 매개변수로 하나의 객체를 초기화해서 사용가능(current 키의 value)
      • useRef()의 current 객체에 접근해서 언제든지 조회/수정/입력이 가능하다
      • 리엑트는 이러한 ref객체의 변경을 감지하지 못한다.
      • setTimeout, setInterval을 통해서 만들어진 id
      • 외부 라이브러리를 사용하여 생성된 인스턴스(socket)
      • 스크롤 위치에서 사용된다.

      //setTimeout / setInterval 사용
      function Timer() {
          const intervalRef = useRef()
      
          useEffect(() => {
              const id = setInterval(() => {})
              intervalRef.current = id
              return () => {
                  clearInterval(intervalRef.current)
              }
          })
      }
      // 외부 라이브러리 사용
      const socket = useRef()
      
      useEffect(() => {
          socket.current = io.connect('http://localhost:8000')
          navigator.mediaDevices
              .getUserMedia({ video: true, audio: true })
              .then((stream) => {
                  setStream(stream)
                  if (userVideo.current) {
                      userVideo.current.srcObject = stream
                  }
              })
          socket.current.on('yourID', (id) => {})
      }, [])

3. 주의사항

   • 렌더링 중에 ref를 설정하면 사이드 이펙트 발생
   • useRef()의 initialState는 생성자를 호춣하면 매번 ref객체가 생김

     function Image(props) {
         // ⚠️ 렌더링 마다 계속해서 생성
         const ref = useRef(new IntersectionObserver(onIntersect))
     }
     
     function Image(props) {
         const ref = useRef(null)
     
         // ✅ 한번만 생성
         function getObserver() {
             if (ref.current === null) {
                 ref.current = new IntersectionObserver(onIntersect)
             }
             return ref.current
         }
     
         // 필요시 getObserver() 호출
     }