[ReactJS_Complete] React.useRef()

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.useRef()

: .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 유사

 * 특정 DOM 선택 시 사용

= JavaScript에서의 특정 DOM 을 선택하는 getElementById, querySelector 같은 DOM Selector 함수와 같은 역할

 * Rerendering 방지

 = useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음

 

 

useRef() 설정

1. useRef import

import React, { useState, useRef } from "react";
 

 

2. 변수에 useRef() 할당

  const nameInputRef = useRef();
 
console.log(nameInputRef); // {current: input#username}
  const enteredNameRef = nameInputRef.current.value; // Max: input에 입력한 값
 

(nameInputRef tag에 사용 후, 값 출력 가능)

 

3. useRef 사용

<input id="username" type="text" ref={nameInputRef} />
 

 

⭐ useRef를 사용할 경우, 간결한 코드로 빠르게 값을 읽어올 수 있음

단, React에 의해 제어되지 않으므로 Uncontrolled Component가 됨

 = useRef는 단순히 input 태그에 입력된 값을 가져오기만 하고 값을 주입하지 않음

⭐ useState를 사용할 경우, 태그와 값을 주고받을 수 있음

React에 의해 제어되므로 Controlled Component가 됨

 = useState는 input 태그의 초기값을 설정해주고 함수를 통해서 값을 변경 및 설정함

 

 

 

참고 자료

Hooks API Reference – React

 

[ReactJS_Complete] Controlled Component, Uncontrolled Component