[리액트] Ref에 관하여 (useRef)

ref란 특정 DOM요소에 일종의 ID를 부여하는 것이다.

ref 없이 구현할 수 있는 기능이라면 코드의 유지보수를 위해 ref 사용을 권장하지 않는다.

ref를 꼭 사용해야하는 경우는 '특정 input에 포커스 부여', '스크롤 박스 조작', 'Canvas에 그리기' 등이 있다.

그리고 다른 컴포넌트 클래스의 하위 함수를 참조 할 수 있으나, React의 기본 원칙은 부모 컴포넌트와 하위 컴포넌트 사이에서만 데이터를 교류하는 것이기에 ref를 사용해 외부 컴포넌트의 함수를 참조하게 되면 스파게티 코드가 될 수 있다.

 

대신 context API나 리덕스를 사용하는 것이 효율적이다.

 

클래스형 컴포넌트에서의 ref

선언

<input ref={(ref) => { this.nameInputBox = ref; }}></input>

혹은

nameInputBox = React.createRef();
<input ref={this.nameInputBox}></input>

 

포커스

requestFocus = () => {
    this.nameInputBox.current.focus();
}

//createRef를 사용하면 current로 참조해야한다.

 

ref로 함수 호출

<MyContainer ref={(ref) => { this.myContainer = ref }}></MyContainer>
<button onClick={()=>this.myContainer.add()}></button>

 

 

 

Hook 사용

Hook의 ref는 클래스형의 createRef와 동일하다.

import React, { useRef } from "react";

  const nicknameInput = useRef();
  
    <input
        ref={nicknameInput}
        value={realname}
        onChange={onChange}
        name="realname"
        placeholder="realname"
        onKeyDown={onKeyPressed}
      ></input>
      
   <button onClick={() => {nicknameInput.current.focus();}}>Get Focus</button>

 

 

추가 기능

ref는 DOM을 선택하는 것 이외에도 변수로써의 역할을 할 수 있다.

const ref = useRef(4);

<div>{ref.current}</div>
//4


const add = () => {
ref.current += 1;
}

일반 변수가 아닌 ref를 사용하는 이유는, ref는 객체로써 취급되며 Heap에 저장되어 프로그램 종료시까지 같은 메모리 주소를 가진다.

함수형 컴포넌트 사용시 호출 때마다 모든 변수가 초기화 되어 값이 변경된다.

하지만, ref를 사용하는 경우는 임의로 값을 변경하지 않는다면 값이 계속 유지된다.

또한, 값이 변경되어도 컴포넌트의 리렌더링이 없어 빠른 참조가 가능하다.

 

일반적으로 id 값, 인스턴스 값, scroll 위치와 같이 초기화되어 처음부터 넘버링 되지 않는 경우에 ref를 사용한다.