목차

1. ref란?
2. ref 선언하는 방법
3. 컴포넌트에서 ref를 선언하는 방법

출처

리액트를 다루는 기술 5장

1. ref란?

공식문서에서 정의한 ref

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다.

단, ref를 남용해서는 절대 안되며 다음과 같은 경우에서만 ref를 사용하라고 나와있습니다.

ref를 사용해야 할 때

1. 특정 input에 포커스 주기
2. 스크롤 박스 조작하기
3. canvas 요소에 그림 그리기

2. ref 선언하는 방법

ref를 선언하는 방식은 크게 두 가지

1. 콜백함수를 통한 ref 설정 ( class 문법 )
2. createRef, useRef를 통한 ref 설정 ( class, hooks )

1) 콜백함수를 통한 ref 설정

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

2) createRef, useRef를 통한 ref 설정

createRef

class App extends Component{
  input = React.createRef()
  ...
  
  render(){
  	return (
      <>
        <input ref = {this.input}/>
      </>
    )
  }

}

useRef

function App(){
  const input = useRef();
  
  return (
    <>
      <input ref = {input}>
    </>
  
  )
}

ref를 선언하는 다양한 방식이 있지만 최근 공식문서에서도 hooks 문법을 강조하고 있지만 class 문법의 중요성도 놓치고 싶지 않았고 useRef와 유사한 createRef를 통해 ref를 학습하고 익히려고 한다.

기존의 ref를 선언하는 방식은 쉬우니 위에 보일러플레이트로 대신하도록 하겠다.

3. 컴포넌트에서 ref를 선언하는 방법

리액트에서는 컴포넌트에도 ref를 달 수 있습니다. 따라서 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용할 수 있습니다.

<MyComponent ref = {(ref) => {this.myComponenet = ref}}>

콜백함수를 통해 컴포넌트에서 ref를 선언하는 방식입니다.

위의 코드를 보면 MyComponent에 있는 함수들을 ref를 통해서 다른 컴포넌트에서도 사용할 수 있게 하는 방식입니다.

저는 createRef를 통해 이를 구현해보도록 하겠습니다.

예제 코드

https://codesandbox.io/s/practical-voice-y3dkc?file=/src/App.js

실행화면

App 컴포넌트에 있는 press2 버튼을 누르게 되면 ValidComponent의 함수들을 모두 사용할 수 있게 됩니다.