useRef
화면이 렌더링되면 DOM 요소에 대한 액세스를 허용하는 React 후크(DOM 요소를 어딘가에 저장하고 저장된 참조 사용) 기입 태그에 초점을 맞춰야 하는 경우 등. 이 경우 useRef 후크를 사용합니다.
function App() {
const ref =useRef('초기값');
console.log('ref' , ref);
return <div></div>
}
변경도 가능합니다.
function App() {
const ref =useRef('초기값');
console.log('ref' , ref);
ref.current="변경값"
console.log('ref2' , ref);
return <div></div>
}
이렇게 설정한 ref 값은 컴포넌트가 계속 렌더링되더라도 언마운트 전까지 유지됩니다!
이 기능으로 인해 useRef는 두 가지 용도로 사용됩니다.
스토리지로 useRef
국가와 유사한 역할을 한다. 그러나 상태가 변경되면 다시 렌더링되고 내부 변수가 초기화됩니다.
ref의 값이 변경되더라도 렌더링이 되지 않기 때문에 내부 변수는 초기화되지 않는다.
그러므로 상태는 다시 렌더링해야 하는 값을 처리하는 데 사용됩니다. ref는 다시 렌더링하지 않는 값을 저장하는 데 사용됩니다.
DOM 요소 접근자로 useRef
특정 입력이 렌더링되자마자 집중되도록 하려면 useRef를 사용하십시오.
조건과 참조의 차이점
import React, { useRef, useState} from 'react'
const style ={
border : '1px solid green',
margin : '10px',
padding : '10px',
}
function App() {
const (count, setCount) =useState(0);
const countRef =useRef(0);
const plusStateCountButtonHandler =() => {
setCount (count +1);
};
const plusRefCountButtonHandler =() => {
countRef.current++;
console.log(countRef.current) // countRef.current 변화하는지 보기 위함
};
return (
<>
<div style={style}>
state 영역 {count} <br />
<button onClick={plusStateCountButtonHandler}>state 증가</button>
</div>
<div style={style}>
ref 영역 {countRef.current} <br />
<button onClick={plusRefCountButtonHandler}>ref 증가</button>
</div>
</>
);
}
export default App
상태는 렌더링되지만 참조는 렌더링되지 않는 것을 볼 수 있습니다.
DOM 요소에 대한 액세스
useRef를 사용한 포커스 주기
function App() {
const idRef =useRef('');
useEffect (()=>{
idRef.current.focus(); //렌더링시 id창에 focus 되게!
},());
return(
<>
<div>
id : <input type="text" ref={idRef}/>
</div>
<div>
pw : <input type="password"/>
</div>
</>
);
}
아이디 10자리 입력 시 비밀번호 입력란으로 자동 전환되는 코드
import React, { useEffect, useRef, useState} from 'react'
function App() {
const idRef =useRef('');
const pwRef =useRef('');
//id가 10이상을 보려면 id를 추적하기 위해 value와 onChange를 엮은다
const (id, setId) =useState('');
useEffect (()=>{
idRef.current.focus();
},());
//10이상이 되면 pw로 focusing!
useEffect (()=>{
if (id.length >= 10) {
pwRef.current.focus();
}
},(id)); // id의 state가 변경될때라서 id 넣어줘야함
return(
<>
<div>
id :
<input
value={id}
onChange ={(e) => setId(e.target.value)}
type="text" ref={idRef}/>
</div>
<div>
pw : <input type="password"ref={pwRef}/>
</div>
</>
);
}
export default App
//------------------------------------------------
<input
value={id}
onChange ={(e) => setId(e.target.value);
//리액트에서 state는 배치업데이트라서 11번째로 내려서가 이처럼 쓰면 원하는대로 되지 않음!
if (id.length >= 10) {pwRef.current.focus();}
type="text" ref={idRef}/>