useRef: 값이 변경되어도 리렌더링 되지 않는 React Hook

 

 

📌 useRef 

: DOM 요소에 접근하기 위해 새로운 Reference 객체를 생성하는 기능

• Reference 객체는 컴포넌트 내부의 변수로 활동
• DOM 요소 조작 가능 ⭕
• 값이 변경되어도 리렌더링❌
  ✨ 렌더링 시키고 싶지 않을 때 사용
• 생애 주기 내내 살아있다.
  👉 Unmount(죽음) 전까지는 값을 그대로 유지할 수 있음 ⭕

 

• 일반 변수: 두 컴포넌트가 하나의 변수를 공유하기 때문에 값에 혼란이 생김
  useRef: 컴포넌트 별로 각각 다른 변수를 사용할 수 있음

 

 

 

 

 

 

 

📌 useRef 사용하기 

 

 

1. import문으로 useRef 불러오기

import { useRef } from "react";

 

 

 

 

2. useRef 변수 생성하기

 

const 변수명 = useRef(초기값);

• { current: 초기값 } 형태의 객체로 반환됨

 

 

 

3. useRef 객체 값 사용하기

 

객체명.current

inputRef.current.focus();

 

 

4. 반환 요소에 접근하기

- 해당 태그에 ref 선언하기

<input ref = {변수명} />

 

 

 

---

 

 

📌 DOM 요소 조작하기
 

이름을 입력하는 DOM 요소에 포커스 주기

: 이름 입력칸이 공백일 때 제출 버튼을 누르면 이름 입력칸에 포커스 주기

 

 

 

1. Reference 객체 생성

const inputRef = useRef();

 

 

 

2. 이름 입력칸 태그의 ref에 Reference 객체명 할당하기

<input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder={"이름"} />

 

 

 

3. Reference 객체의 값에 focus() 메서드 추가하기

// 폼 제출 버튼
const onSubmit = () => {
    if(input.name === "") {
        inputRef.current.focus();
    }
}

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트