언제 사용할까?
특정 값을 저장하기 위해 사용
Ref가 변경된다고해서 리렌더링이 일어나지 않는다. (state와 차이)
사용법
1) useRef import
2) useRef 사용해 초기값 지정
function App() {
const ref = useRef("초기값");
console.log("ref: ", ref);
}
current라는 key에 값이 저장돼있는 것을 확인할 수 있다!
3) 값 변경하기
function App() {
const ref = useRef("초기값");
console.log("ref: ", ref);
ref.current = "바꾼 값";
console.log("ref: ", ref);
}
ref의 current에 접근해 값을 바꿔준다
사용 예제
✔︎ 아이디, 비밀번호 input 태그가 있는 페이지에 접속하면 아이디 input에 바로 포커스 되도록 하기
1) 기본 구조 만들기
function App() {
return (
<>
<div>
아이디: <input type="text"></input>
</div>
<div>
비밀번호: <input type="text"></input>
</div>
</>
);
}
2) 최조 렌더링시 포커스할 수 있도록 <input>의 ref속성을 이용해 둘을 연동시켜두고, focus()를 사용
import { useEffect, useRef } from "react";
function App() {
const idRef = useRef("");
useEffect(() => {
idRef.current.focus();
}, []);
return (
<>
<div>
아이디: <input type="text" ref={idRef}></input>
</div>
<div>
비밀번호: <input type="text"></input>
</div>
</>
);
}
export default App;
ref로 연결해둔 태그에 포커스된다
아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동시키기
import { useEffect, useRef, useState } from "react";
function App() {
const [value, setValue] = useState("");
const idRef = useRef("");
const pwRef = useRef("");
useEffect(() => {
idRef.current.focus();
}, []);
if (document.activeElement === idRef.current && value.length >= 10) {
pwRef.current.focus();
}
const inputHandler = (event) => {
setValue(event.currentTarget.value);
};
return (
<>
<div>
아이디:{" "}
<input
type="text"
ref={idRef}
value={value}
onChange={inputHandler}
></input>
</div>
<div>
비밀번호: <input type="text" ref={pwRef}></input>
</div>
</>
);
}
export default App;
- useEffect로 value를 의존성배열로 갖는 useEffect를 활용하는 방법도 떠올랐지만, 챌리지반에서 발표할 문서에서 읽은 내용이 떠올라 렌더링 중에 focus 여부를 결정하는 방향으로 변경했다!
'React' 카테고리의 다른 글
[React] memoization (0) | 2024.08.17 |
---|---|
[React] useContext (0) | 2024.08.16 |
[React] useState (0) | 2024.08.16 |
[React] styled-component (0) | 2024.08.16 |
[React] 리액트의 개념과 성능 최적화 팁 (0) | 2024.08.14 |