useRef()

클래스형 컴포넌트에서 createRef()를 hooks에서는 useRef()로 사용한다.

사용할 때

• 컴포넌트가 마운트 되고 DOM 요소에 접근 가능해 졌을 때
• DOM 요소에 포커스(focus), 외부 요소 클릭 이벤트(out-side-click-event) 적용할 때
• 렌더링과 무관한 값을 고유값으로 저장해야 할때(클래스형의 멤버변수 처럼 사용)
  • useRef()를 사용해 이전 상태값을 저장

1) Input focus 적용

import React, {useRef} from 'react'
function Compo(){
  const inputElement= useRef(null)
  const onClick=()=>{
    if(inputElement.current) {
      inputElement.current.focus()
    }
  }
  return (
    <div>
      <input ref={inputElement} type='text' />
      <button onClick={onClick}>focus the text</button>
    </div>
  )
}

2) 렌더링과 무관한 값 저장

• 이전 상태값을 저장하는데 useRef를 사용

import React, {useState, useEffect, useRef} from 'react'

function Profile() {
  const [age, setAge] = useState(20);
  const prevAgeRef = useRef(20); // Ref생성
  useEffect(()=>{
    prevAgeRef.current = age; // age가 변경될 때 마다 prevAgeRef 값 변경
  },[age])
  const prevAge = prevAgeRef.current; // prevAge = 이전값 받음
  // test는 age랑 이전값이랑 같으면 same, 다를때 이전값보다 age가 크면 older, 작거나 같으면 yonger 출력
  const test = age === prevAge ? 'same' : age > prevAge ? 'older': 'younger';
  return (
    <div>
      <p>{`age ${age} is ${text} than age ${prevAge}`}</p>
      <button onClick={()=>{
        const age = Math.floor(Math.random()*50+1);
        setAge(age);
        }}>Age 랜덤변경</button>
    </div>
  )
}

참고 : 책 : 실전 리액트 프로그래밍/이재승 저