[React] ref와 useRef 훅

1. Ref란?

ref는 DOM을 직접적으로 건드려야하는 때 사용합니다. 순수 js로 컴포넌트를 제어하는 방식으로, ref는 current 프로퍼티를 가진 객체입니다.

2. id가 아니라 ref를 사용하는 이유는?

id는 DOM에서 유일해야하는데, React 컴포넌트는 여러번 사용될 수 있기 때문에 id를 사용하는것이 적절하지 않습니다.
반면에, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문입니다.

3. ref를 사용하는 방법

3-1. 클래스형 컴포넌트에서 사용하는 방법

• React.createRef 메소드를 사용합니다.
• 변수명.current로 접근할 수 있습니다.
• React 16.3 버전부터 사용 가능합니다.

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

  handleFocus = () => {
    this.input.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={this.input} />
        <button onClick={() => this.handleFocus}>
          포커스
        </button>
      </div>
    );
  }
}

3-2. 함수형 컴포넌트에서 ref를 사용하는 방법

• useRef 훅을 사용해야합니다. createRef를 사용할 수는 있지만, 함수 호출에 따라 createRef로 재호출되는 문제가 있습니다. 그렇기에 useRef를 권장합니다.
• 마찬가지로, 변수명.current로 접근할 수 있습니다.

예시코드

import { useRef } from "react";

function RefSample() {
  const input = useRef();
  const handleFocus = () => {
    input.current.focus();
  }

  return (
    <div>
      <input ref={input} />
      <button onClick={handleFocus}>
        포커스
      </button>
    </div>
  );
}

3-3. 콜백함수를 통해 사용하는 방법

• jsx 내 DOM 요소에 ref 프로퍼티 내 콜백 함수를 통해 ref를 전달합니다.

예시코드

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

4. 실제 어플리케이션에서 사용하는 예시 (from. legacy 공식 문서)

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

5. ref와 state의 차이 비교

ref	state
useRef(initialValue) => { current : initialValue} 반환	useState(initialValue) => [state = initialValue, setState] 반환
변화 시 리렌더링이 일어나지 않는다	변화할 때마다 리렌더링이 일어난다
Mutable - 렌더링 프로세스 외부에서 current 값을 수정하고 업데이트할 수 있음	Immutable - setState를 통해서 수정해 리렌더링을 대기열에 추가해야함
You shouldn’t read (or write) the current value during rendering. 렌더링 중에는 current 값을 읽거나 쓰지 말아야한다.	You can read state at any time. However, each render has its own snapshot of state which does not change. state를 언제든 읽어올 수 있다. 그러나, 각 렌더링은 변화되지 않은 state을 스냅샷으로 갖고 있다.
비제어컴포넌트	제어 컴포넌트

6. forwardRef

함수형 컴포넌트에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 접근하고자 할 때 사용하는 메서드이다.

• forwardRef를 통해 ref를 prop으로 받아서 원하는 element에 전달할 수 있다.
• forwardRef로 자식 컴포넌트를 감싸고 전달하고자 하는 ref를 props 다음 두번째 인자로 전달한다.

예시코드

function App() {
  const ref = useRef(null);

  useEffect(() => {
    console.log(ref);
  }, [ref]);

  return (
    <div className="App">
      <StyledInput ref={ref} />
    </div>
  );
}

const StyledInput = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

참고자료 출처

• 리액트 공식문서
• React ref 톺아보기

ref로 값 참조하기 – React

React ref 톺아보기