[React.js] ref가 뭘까?

1. ref?

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.
리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref 이다.

2. ref를 사용하는 이유?

id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 있다.

ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.

하지만 리액트에서도 id를 사용할 수는 있다👍

3. 어떨 때 사용해야 하는가?

DOM을 꼭 직접적으로 건드려야 할 때 사용한다.

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기 등

위와 같은 경우에는 어쩔 수 없이 DOM에 직접적으로 접근해야한다.
리액트 공식 문서에 보면

선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양해야한다.

ref의 사용을 최대한 줄여야 한다고 명시되어있다.

4. ref 사용 방법

1. ref를 사용할 엘리먼트에 ref라는 콜백함수를 props로 전달한다.

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

2. createRef()를 이용한다.

import React, { Component } from 'react';

class RefSample extends Component {
  input = React.createRef();
}

5. useRef()

훅(hook)을 사용해야하는 함수형 컴포넌트 방식에서는 useRef()를 사용해야 엘리먼트에 ref를 지정할 수 있다.

6. Ref(referrence)의 특징

1. 컴포넌트 리렌더링이 되더라도 레퍼런스의 값은 유지된다.

2. 레퍼런스 값의 업데이트는 컴포넌트 리렌더링을 트리거하지 않는다.

7. Ref와 state의 차이

1. state의 변화는 컴포넌트 리렌더링을 트리거하지만 ref는 아니다.

2. 상태 업데이트는 비동기적이며 렌더링 된 후 업데이트 된 값을 사용할 수 있지만 참조는 동기적이며 업데이트 된 값은 바로 사용할 수 있다.