[리액트] useRef

본 내용은 아래 강의에 대한 복습내용입니다.

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

 

---

Reference객체

useRef() 새로운 Reference객체를 생성하는 기능

Reference 객체는 컴포넌트 내부의 변수로써 일반적인 값들을 저장한다. 따라서 State값과 비슷하고

useRef()는 useState()와 비슷하다고 볼 수 있다.

다만, State값은 값이 변경되면 컴포넌트가 리렌더링되지만, Reference 값은 값이 변경되도 리렌더링 되지 않는다.

즉, 다시 말해서 useState는 리렌더링을 일으키는 상태값. useRef는 리렌더링 없이 값만 저장하는 참조값이다.

 

보통 단순히 값을 임시 저장하거나, 혹은 DOM요소를 직접 제어할 때 useRef를 사용한다.

 

*DOM 이란?

DOM이란 HTML로 작성된 여러 요소들에 자바스크립트가 접근할 수 있도록 브라우저가 변환시킨 객체이고, 자바스크립트는 이러한 DOM을 통해 HTML로 짜여진 요소들을 생성하고 수정하고 삭제할 수 있다.

 

 

useRef()는 useState()와 동일하게 리액트 내장함수이므로, 사용하기 위해서는 아래와 같이
import문을 명시해주어야한다.

import { useRef } from "react";

const MyComponent = () => {
  const countRef = useRef(0);
  
  const increase = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };

  return (
    <div>
      <button onClick={increase}>+</button>
    </div>
  );
};

 

useRef() 는 {current : 초기값} 형태의 객체를 반환한다.

---

 

아래 코드는 input같은 DOM요소를 직접 조작하기 위해 useRef가 쓰인 것을 알 수 있다.

먼저, input태그에 ref옵션을 주고 상태값인 inputRef를 준다.

그러면 inputRef.current.focus()에서 inputRef.current는 <input> DOM 자체를 가리키게 된다.

import { useRef } from "react";

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus(); // DOM 접근
  };

  return (
    <div>
      <input ref={inputRef} placeholder="이름을 입력하세요" />
      <button onClick={handleFocus}>포커스 주기</button>
    </div>
  );
};