[React Hooks] UseRef( )

useState( ) 에 이어서 오늘 공부할 React Hook은 useRef( )이다. 

useRef( )란 무엇일까? 오늘도 공식문서를 찾아가 봤다.

 

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.

이게 무슨 소리지..?

 

조금 더 자세한 설명이 필요해서 책과 다른 분들이 올린 포스팅을 찾아봤다.

 

useRef( )는 특정 DOM에 접근할 수 있다.

그렇다면 DOM이란 정확하게 뭘까? 이건 다음에 자바스크립트 포스팅에서 다룰 예정이다.

 

우선 useRef( ) 사용법을 알아보자!

 

1. Ref 객체 만들기

const useref = useRef()

 

 

2.  선택한 DOM에 ref값을 넣어준다.

<input type="text" ref={useref} /> // input 태그에 ref를 줬다.

 

 

3. .current 사용해서 DOM 호출하기.

useref.current.focus(); 
//current는 내가 선택한 DOM이다. 
//위에서 input 태그에 ref를 사용했으니 input창에 focus를 호출한다.

 

useEffect와 useRef를 공부하면서 작성했던 코드다.

useRef를 사용해서 컴포넌트가 마운트 되면 input창에 focus가 맞춰지게 했다. 

import { useEffect, useState, useRef } from "react"
import { useRouter } from 'next/router'
export default function FunctionalComponentLifeCyclePage() { 
  const router = useRouter()
  const [count, setCount] = useState(0)
  const inputRef = useRef<HTMLInputElement>()
  
  useEffect(() => { 
    console.log('컴포넌트 마운트 완료');
    inputRef.current.focus();
 
    return () => { 
      console.log('잘가요~~')
    }
  }, [])

  useEffect(() => {
    console.log('컴포넌트 수정 완료')
  }, [count]);
 
  
  function onCllickCount() { 
    setCount(prev => prev + 1)
  }
  function onClickMove() { 
    router.push('/')
  }
  return (
    <>
      현재 카운트 : {count}
      <button onClick={onCllickCount}>카운트 증가!!</button>
      <button onClick={onClickMove}>페이지 이동</button>
      <input type="text" ref={inputRef}/>
    </>
  )
}

 

 

useRef( )를 사용하는 것 자체는 어렵지 않다. 그렇다면 어떨 때  useRef를 사용할까? 

• DOM선택해서 사용하기
• 컴포넌트 변수 관리하기

DOM선택해서 사용하는 방법은 위에 코드 예시를 보면 된다.

 

컴포넌트 변수 관리하는 방법은 

공식문서 👇  use가 붙은 리액트훅은 리렌더링을 발생시키지 않는다. 이 부분이 일단 중요한 것 같다.

예를 들면 useSate에 저장한 값은 화면이 다시 그려저도 없어지지않는다!

useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요.

 

 

이런 것도 가능하다고 갓원두님께서 말씀해 주셨다.  input 창에 입력한 값을 state에 저장하지 않고 바로 사용할 수 있다..! 

재밌는 useRef 사용하기! 공부하다가 추가할 내용이 있으면 추가할 예정입니다.

 

... keepcoing