React useRef 개념 및 사용법

React useRef 개념 및 사용법

ref는 참조를 뜻하며 리액트에서는 참조(reference)를 줄여 ref라고 부른다.

가장 기본적인 기능은 다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다.

return (
      <form onSubmit={addUserHandler}>
        <label htmlFor="username">username</label>
        <input
          type="text"
          id="username"
          onChange={usernameChangeHandler}
          value={enteredUsername}
        />
        <label htmlFor="age">age</label>
        <input
          type="number"
          id="age"
          onChange={ageChangeHandler}
          value={enteredAge}
        />
        <Button type="submit">Add User</Button>
      </form>
  );

이 코드의 input 에서는 사용자가 입력한 내용을 관리한다. 매번 키를 누를 때마다 state가 업데이트되고 그 state를 인풋에 다시 넘겨준다.

그리고 그 state를 사용하여 인풋을 재설정하고 데이터가 필요한 곳으로 보내기도 한다.

이렇게 관리해도 좋지만 폼을 제출할 때만 필요한데도 키를 입력할 때마다 state를 업데이트한다는 건 약간 과하다. 이 경우 ref를 사용할 수 있다.

import {useRef} from "react";
const nameInputRef = useRef();
const ageInputRef = useRef();

이를 위해 먼저 ref를 생성해야 하는데 여기서 useRef 훅을 사용한다.

모든 리액트 훅과 마찬가지로, useRef도 함수형 컴포넌트 안에서만 사용 가능하다.

여기에서 생성되는 이 ref 값은 항상 객체이며 이 객체에는 current 속성이 있다.

current 속성은 ref가 연결된 실제 값, 즉 실제 DOM 노드이며 따라서 조작하거나 여러 가지 작업을 할 수 있다.

const enteredUsername = nameInputRef.current.value;
const enteredAge = ageInputRef.current.value;

current 저장된 값은 input이며 input의 value 속성을 이용할 수 있다.

return (
    <form onSubmit={addUserHandler}>
      <label htmlFor="username">username</label>
      <input type="text" id="username" ref={nameInputRef} />
      <label htmlFor="age">age</label>
      <input type="number" id="age" ref={ageInputRef} />
      <Button type="submit">Add User</Button>
    </form>
  );

ref를 HTML 요소에 연결하기 위해서 ref를 연결하려는 해당 요소에 ref prop을 추가한다.

ref 프롭은 key prop과 마찬가지로 내장 prop이며 어떤 HTML 요소에도 추가할 수 있다.

nameInputRef.current.value = '';
ageInputRef.current.value = '';

리액트 없이 DOM을 조작할 수 있지만 일반적으로는 그렇게 하면 안된다.

하지만 사용자가 입력한 값을 재설정하려는 경우에는 큰 문제는 없다.

따라서 사용자가 입력한 값을 초기화 하기 위해서 빈문자열로 설정한다.

그러면 ref나 state 중 어떤 것을 사용해야할지에 대한 문제가 있다.

예를 들어 값을 빠르게 읽고 싶을 때가 있을 때 값만 읽고 아무 것도 바꿀 계획이 없다면

state는 그리 필요가 없다. 불필요한 코드와 작업이 많아지기 때문에 값만 읽고 싶다면

ref가 더 낫다. 하지만 ref는 코드가 조금 더 적지만 DOM을 조작한다는 상당히 예외적인 일을 해야 하기때문에 사용자의 선택에 달려있다.

제어 컴포넌트 vs 비제어 컴포넌트

ref로 값에 접근하는 경우라면 제어되지 않는 컴포넌트이다.

왜냐하면 이것들은 내부 state이기 때문에 리액트로 이 입력 요소의 state를 제어하지 않기 때문이다.

state를 관리하고 모든 키 입력에서 해당 state를 업데이트하는 방식을 사용할 경우 제어된 접근 방식이다.

내부 state가 리액트에 의해 제어되기 때문이다.