5. ref: DOM에 이름 달기

DOM 요소의 id

<div id=“my-element“></div>

• HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다.

ref를 사용하는 경우

• DOM을 꼭 직접적으로 건드려야 할 때
• 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보겠습니다.
• 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 8장에서 Hooks를 배우면서 알아볼 것입니다.

DOM을 꼭 사용해야 하는 상황

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

콜백 함수를 통한 ref 설정

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

createRef를 통한 ref 설정

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

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

render() {
    return (
      <div>
        <input ref={this.input} />
      </div>
    );
  }
}

컴포넌트에 ref 달기

<MyComponent
  ref={(ref) => {this.myComponent=ref}}
/>

• 이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근할 수 있습니다.
• 즉, 내부의 ref에도 접근할 수 있습니다(예: myComponent.handleClick, myComponent.input 등).

정리

• 컴포넌트 내부에서 DOM에 직접 접근해야 할 때는 ref를 사용합니다.
• 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려한 후에 활용하세요.