useRef
ref 객체를 반환ref 객체에는current 속성이 있고 거기에 저장됨ref 값은 컴포넌트 전생애 주기 동안 유지
즉, 재렌더링이 되어도 언마운트 전까지 이전 값을 그대로 유지 가능
언제 사용하나?
- 저장공간
-
state는 변하면 재렌더링된다.
그럼 컴포넌트 내부 변수들 초기화됨 (컴포넌트는 함수이기 때문) -
ref 값은 변해도 재렌더링 안함 (ref 값이 유지)
state가 변해서 재렌더링 돼도 ref의 값은 유지됨
자주 변경되는 값을 state에 넣는다면 재렌더링이 많이 발생
그럴때, ref를 사용하자
즉, 변화는 감지해며 재렌더링을 발생시키지 않고 싶을 때
카운트 예제
- 일반변수
- 재렌더링 X (화면에 변경 사항 보이지 않음)
- 재렌더링 시 값 저장 X (재렌더링 후 변수에 있던 값은 초기화됨)
- useState
- 재렌더링 O (화면에 변경 사항 보임)
- 재렌더링 시 값 저장 X (재렌더링 후 변경된 값을 가지고 있음)
- useRef
- 재렌더링 X (화면에 변경 사항 보이지 않음)
- 재렌더링 시 값 저장 O (재렌더링 후 이전에 값을 그대로 가지고 있음)
state 버튼을 클릭하면 재렌더링 된다. 이때 각 변수가 가진 값을 확인해보자
- DOM 요소에 접근
useRef를 사용하면 간단하게 접근하여 DOM을 조작 할 수 있다.
input에 focus 주기
- 로그인 페이지 들어오면 바로 아이디 input에 focus 주기
- alert 창 닫으면 바로 아이디 input에 focus 주기
const refId = useRef(null);
...
<input
ref={refId}
type="text"
id="user_id"
name="user_id"
placeholder="아이디를 입력하시오"
required
aria-invalid
aria-describedby="error_id"
onInput={(e) => {
let value = e.target.value;
const userId = document.querySelector('#error_id');
const pwRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
const isValidPassword = value => pwRegex.test(value);
if (!value || !isValidPassword(value)) userId.classList.add('is_invalid')
else userId.classList.remove('is_invalid')
}}
/>
커스텀 훅 (comstom hook)
React에서는 기본적으로 몇 가지 hook을 제공한다.
그 외에 사용자가 필요한 hook은 커스텀해서 사용 할 수 있다.
커스텀 훅 사용하는 이유
로직을 재사용하고 싶어
↓
함수로 만들자
↓
hook을 쓰고 싶은데 일반 함수에서는 못 쓰네...
↓
그럼 custom hook 만들어야지
hook 사용 조건
- 함수 컴포넌트 내에서만 사용 O (클래스 컴포넌트에서는 사용 못 함)
- 커스텀 훅에서도 사용 O
- 반복문, 조건문, 중첩 함수에서 사용 X
커스텀 훅 사용 시 주의사항
- 배열로 반환할 때
- 이름이 아닌 순서가 중요하다 (이름은 변경해서 사용 가능)
export default function useInput(initialValue) {
...
return [val, handleInputValue, handleAlert]
}- 객체로 반환할 때
- 이름이 중요하다 (순서는 상관없음)
export default function useInput(initialValue) {
...
return {
val,
handleInputValue,
handleAlert
}
}실습) useInput 커스텀 훅
- 컴포넌트
import useInput from "./hooks/useInput";
export default function Test() {
const [val, handleInputValue, handleAlert] = useInput('');
return (
<>
<input type="text" onChange={handleInputValue} value={val} />
<button type="button" onClick={handleAlert}>확인</button>
</>
);
}- 커스텀 훅
import { useState } from "react";
export default function useInput(initialValue) {
const [val, setVal] = useState(initialValue);
const handleInputValue = (e) => {
console.log(e.target.value)
setVal(e.target.value)
}
const handleAlert = () => {
alert(val)
}
return [val, handleInputValue, handleAlert]
}
