[포스코x코딩온] 웹 풀스택 과정 12주차 회고 | React - Ref

🎈 Ref

React에서 HTML요소를 id를 사용하여 불러온다면, 컴포넌트를 반복하여 사용할 때 id가 중복되는 문제가 발생할 수 있다.
Ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 선언 및 사용되어 이를 해결해준다.

• 동일한 컴포넌트를 반복해 사용해도, 각 컴포넌트 내부에서만 동작한다.
• DOM을 직접적으로 건드려야 할 때 사용한다.
  (ex. 특정 input에 focus 주기, 스크롤박스 조작, 비디오 플레이어의 재생/정지 기능)

💡 클래스형 컴포넌트에서 ref 사용하기

방법1) 콜백함수

• 사용하고자 하는 DOM 요소에 ref라는 콜백함수 작성

class RefClass extends Component {
  handleFocus = () => {
    this.myInput.focus();
  }
  render() {
    return (
      <>
        <input ref={(ref) => (this.myInput = ref}/>
        <button onClick={this.handleFocus}>focus</button>
      </>
    )
  }
}

방법2) 내장함수 createRef

• React.createRef 함수를 이용하여, 컴포넌트 내부에서 변수에 ref 요소를 담아준다.
• ref 요소를 실제 DOM 요소의 prop에 연결한다.
• 사용할 때는 this.input.current로 불러와 이용한다.

import { Component, createRef } from "react";

class RefClass extends Component {
  myInput = createRef();
  handleFocus = () => {
    this.myInput.current.focus();
  }
  render() {
    return (
      <>
        <input ref={this.myInput}/>
        <button onClick={this.handleFocus}>focus</button>
      </>
    )
  }
}

💡 함수형 컴포넌트에서 ref 사용하기

Hook의 useRef()를 이용한다.

• useRef(): 인자로 받은 값으로 초기화된, 변경가능한 ref 객체를 반환한다.
• 생성된 ref 객체를 원하는 DOM 요소에 ref 값으로 설정한다.
• ref.current으로 객체에 접근할 수 있다.

import { useRef } from "react";

export defaut function RefFunc1() {
  const inputRef = useRef();
  const handleFocus = () => {
  }
  return (
    <>
      <input ref={inputRef}/>
      <button onClick={handleFocus}>focus</button>
    </>
  )
}

• ref 값이 변경되어도 리렌더링 되지 않음 (컴포넌트 내에서 로컬변수로 활용 가능)

import { useRef } from "react";

export default function RefFunc2() {
  const idRef = useRef(1);
  const plusIdRef = () => {
    idRef.current += 1;
    // idRef 값이 +1 되어도, 리렌더링되지 않음
    console.log(idRef.current);
  }
  return (
    <>
      <h2>{idRef.current}</h2>
      <button onClick={plusIdRef}>plus ref</button>
    </>
  )
}