React useRef 후크 간단한 예제

3176 단어

useRef 후크 반응



useRef 후크는 렌더링 간에 값을 유지하는 데 사용됩니다.
업데이트 시 다시 렌더링하지 않으며 변경 가능한 값을 저장하는 데 사용할 수 있으며 DOM 요소에 직접 액세스하는 데에도 사용됩니다.

아래는 상태(이름)의 이전 값을 변경한 후 유지하는 useRef의 예입니다.

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

export default function App(){
  const [name, setName] = useState('')
  const prevName = useRef()

  useEffect(()=> {
    prevName.current = name
  },[name])

  return (
     <>
       <input value={name} onChange={e => setName(e.target.value)}/>
      <div> My name is {name} and it used to be {prevName.current}</div>

     <>
   )
}


참조:
  • React useRef w3schools

  • 좋은 웹페이지 즐겨찾기