React createRef & useRef ?

 

HTML 요소에게 id 값이나 class 값을 주어 직접 DOM요소를 조작하는 경우는 매우 많습니다.

하지만 React에서 DOM요소를 직접 컨트롤 하는 것은 좋은 방법이 아니라고 생각합니다.

왜냐하면 컴포넌트 재사용성으로 인해 여러 곳에서, 여러번 쓰일 가능성이 있기 때문입니다.

 

react에서는 dom 요소에 직접 접근할수 있게 해주는 ref 라는 것이 있습니다.

ref는 포인터 같은 요소로 요소를 참조할 수 있게 해줍니다.

 

ref는 클래스형 컴포넌트 / 함수형 컴포넌트 임에 따라 사용법이 다르며, 하나씩 살펴보도록 하겠습니다.

(ref는 많이 사용하지 않는 것이 좋습니다. ref는 어떤일이 일어날지 예상하기 힘들수 있으며 원하는 모든 동작은

state와 props를 통해 해결할 수 있습니다.)

---

1. 클래스형 컴포넌트

class Ccomponent extends React.Component {
  constructor(props) {
    super(props);
    this.textInputref = React.createRef();   ...①
    this.doSomething = this.focusTextInput.bind(this);
  }

  doSomething() {
    // ... do something 
    // ex) this.textInputref.current.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.textInputref} ...②
        />
          onClick={this.doSomething}
      </div>
    );
  }
}

다음과 같이 ①ref 객체를 생성해준뒤 ②에 연결해주는 모습입니다.

컴포넌트가 마운트될 때 React는 current 프로퍼티에 DOM 엘리먼트를 대입하고, 컴포넌트의 마운트가 해제될 때 current 프로퍼티를 다시 null로 돌려 놓습니다. ref를 수정하는 작업은 componentDidMount 또는 componentDidUpdate 생명주기 메서드가 호출되기 전에 이루어집니다.

current를 통해 요소에 접근하여 원하는 액션을 할 수 있게 됩니다.

 

 

2. 함수형 컴포넌트

아쉽게도 class형 컴포넌트의 createRef는 함수형에서 정상 동작하지 않습니다.

하지만 useRef라는 hooks를 통해 동일한 작업을 할 수 있습니다.

const refContainer = useRef(initialValue);

function TextInputWithFocusButton() {
  const inputRef = useRef(null);
  const onButtonClick = () => {
    // ... do something
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef hooks를 통해 refContainer라는 것을 만들어 준뒤 연결시켜줍니다.

그 후 마찬가지로 inputRef.current 를 통해 원하는 액션을 할 수 있습니다.

---

createRef는  매 번 함수가 실행 될때마다 새로운 ref를 만들어 냅니다. 리랜더링 될때마다 값을 기억해두지 않고, 새로운 instance를 만들어 사용하게 됩니다.

 

반면에 useRef는 리랜더됨에도 불구하고 값을 기억하여 새로운 instance를 생성하지않고 저장하여 사용합니다.