Ref

리액트 문서 Ref와 DOM

Ref는 돔엘리먼트에 접근하기 위해 사용한다.

일반적으로 자식을 수정하려면 props를 전달해서 값이 변경되었을 때 다시 렌더링 한다.

하지만 직접 돔 요소를 선택해서 어떤 작업을 해야하는 경우도 생긴다.

Ref를 사용해야 할 때

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

Ref 불러오기

이후 예시는 함수 컴포넌트 기준으로 작성.

// 클래스 컴포넌트 
import { createRef } from "react"

// 함수 컴포넌트
import { useRef } from "react"

비제어 컴포넌트에서 Ref 사용하기

리액트 문서 비제어 컴포넌트

폼을 만들 때, 일반적으로 제어 컴포넌트로 만들지만 Ref를 사용해 비제어 컴포넌트로 작성할 수 있다.

제어 컴포넌트에서는 input 등의 값을 state로 관리하고 업데이트 한다.

비제어 컴포넌트에서는 state로 폼 값을 제어하는 대신 DOM 자체에서 폼 데이터를 다룬다. ⇒ 그러기 위해서 Ref 를 사용한다. (ref를 사용해 DOM 요소를 연결한다)

useRef를 사용하면 useState처럼 값을 만들 수 있다.

값이 변경되어도 리렌더링을 하지 않기 때문에 불필용한 리렌더링이 필요하지 않을 때 자주 사용된다.

import { useRef } from "react"

// ref 를 활용 -> 비제어 컴포넌트로 폼을 다루자
export default function UncontrolledForm() {
  const inputRef = useRef()

  function handleSubmit(e) {
    e.preventDefault()
    alert(inputRef.current.value)
    inputRef.current.focus()
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>닉네임: </label>
      <input type="text" name="nickname" ref={inputRef} />
      <input type="submit" value="제출" />
    </form>
  )
}

폼 안에 텍스트 인풋이 하나 있고 제출 버튼이 있는 구조다. 제출 했을 때 handleSubmit함수가 실행된다.

닉네임을 입력하는 input의 값을 state로 관리하지는 않지만, inputRef.current.value처럼 ref를 이용해서 값에 접근할 수 있다.

그리고 제출 후 다시 인풋에 포커스를 놓기 위해 inputRef.current.focus()이렇게 작성할 수 있다. 인풋에 포커스를 하려면 인풋 요소를 일단 선택해야 하는데 그 부분을 Ref사용으로 간단하게 처리할 수 있다.