useRef ?
ref라는 말은 reference 라는말에서 비롯된것같아 많이 들어본 용어이다.
그럼 use라는게 붙었으니 리엑트 훅중의 하나인것은 알겠는데 useRef라는것은 무엇일까?
ref =>참조한다.
일반적으로 값을 저장하는것으로는 state를 태그를 저장하는것으로는 useRef를 사용하는것이라고 하셨다.
응??
무슨말인지 일단은 그렇구나 하고 넘어갔지만, 언제, 어느시점에 , 왜 사용하는지 알고싶어 더 찾아보았다.
일단은
State는 변할때마다 다시 리랜더링 되며 컴포넌트 내부 변수들이 초기화된다. 그러면서 모든 함수로직들이 다시 실행도니다.
이렇게 원하지 않는 리랜더링을 시키는것이 state다.
그렇다면 ref는??
state대신 ref안에 값을 저장하면 아무리 그 안의 값을 변경해도 컴포넌트가 다시 랜더링 되지 않는다 고 한다.
또한 컴포넌트가 랜더링된다고 하더라도 ref안의 값이 변경되지 않고 그대로 유지된다.
ref와 state를 같이 쓰더라도 마찬가지의 결과를 낸다.
즉 다시말하면, state의 변화가 있더라도 ref의 값은 유지된다는 말이다.
주로 input요소를 클릭하지 않고 포커스를 주고싶을때 많이 사용되며, 특정 DOM에 접근할 수 있게한다.
렌더링: 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 시 리렌더링됨.
useRef를 사용시에 ref이름.current.focus()라고 사용하는데, .current는 선택한 DOM 즉, ref로 연결한 태그를 가리키는 것이다. 현재 Ref객체를 뜻해 해당 객체의 기능을 이용허거나, 값을 이용하는 경우에는 current를 반드시 붙여주어야한다.
스크롤 에니메이션을 추가하고싶을때도 useRef가 유용하게 사용된다고한다.
참고할것:
import {useState} from 'react' export default fuction App(){ const [name,setName] = useState("") set [cuName, setCuName] = useState("") console.log("render") return( <> <input value ={name} onChange={(event)=>setName(event.target.value)/}> <button onClick={()=>setCuName(name)}>제출</button> <div>{cuName}</div> )state변경시마다 reder가 일어남.
useRef를 사용할경우 =>
import { useState, useRef } from "react" export default function App() { const [currentName, setCurrentName] = useState("") const inputRef = useRef("") console.log("render") return ( <> <input ref={inputRef} /> <button onClick={() => setCurrentName(inputRef.current.value)}>제출</button> <div>나의 이름은 {currentName} 입니다.</div> </> ) }
input에서 setName함수를 실행시켜 해당 state값을 변경할 때마다 일어나던 rendering이 아예 사라졌기 때문에, 화면을 처음 받아올 때와 제출 버튼을 눌렀을 때만 rendring이 일어남.
useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념할것.
