React를 다루는 기술 06 - ref로 DOM에 id달기

일반적으로 HTML에서 특정 DOM에 유니크한 이름을 붙여 이를 통해 원하는 DOM만 다루기 위해 id를 지정한다.
React에서도 비슷한 작업을 할 때 id를 사용할 수 있지만 기본적으로 권장되지 않는 방법이다.
왜냐하면 React는 여러개의 컴포넌트의 집합으로 이루어져 있을 뿐 하나의 페이지에 각 컴포넌트가 렌더링한 DOM들이 모두 모여있는 형태를 띄므로 id가 중복되는 문제가 발생할 수 있기 때문이다.
컴포넌트가 10여개 정도라면 이런 문제를 걱정할 필요는 없겠지만 수천개 이상의 컴포넌트라면 id가 문제를 발생시키지 않을거라 확신하기 어렵다.

이 때문에 전역적으로 영향을 미치는 id가 아닌 컴포넌트 내에서 지역적으로만 영향을 행사하는 유니크한 이름이 필요했고 그것이 ref이다.

ref를 사용할 때

사실 HTML에서 id를 이용해 특정 값을 조회하거나 변경하는 등의 작업 혹은 className을 통해 CSS를 변경하는 등의 작업은 굳이 ref가 아니어도 state를 통해 더 쉽게 할 수 있다.
그럼 ref는 언제 사용할까?
그것은 DOM을 직접적으로 건드려야 할 때 이다.

아무리 className이나 각종 value값을 수정하여도 DOM에 포커싱하거나 스크롤을 조작하거나 하는 등의 작업은 진행할 수 없기 때문인데
ref를 사용하는 방법은 2가지가 존재한다.

콜백함수를 통한 ref 설정

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

위의 코드는 화살표 함수를 이용해 해당 input DOM에 this.message라는 이름을 붙인 것이다.
향후 this.message를 통해 해당 DOM에 직접적으로 개입할 수 있다.

createRef를 통한 ref 설정

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

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

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

위는 React에서 제공하는 createRef 함수를 이용한 것으로 컴포넌트 내부에서 createRef()를 멤버변수에 담아주고
DOM에 해당 멤버변수를 prop으로 넣어주는 것을 통해 ref를 설정할 수 있다.

컴포넌트에 ref 달기

컴포넌트에 이벤트를 설정할 수는 없었지만 ref는 설정할 수 있다.
이를 통해 부모 컴포넌트가 직접 자식 컴포넌트의 내부에 접근할 수 있으며 값의 수정 및 DOM의 조작이 가능하다.

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

ref를 설정하는 방법은 다른 DOM과 동일하게 콜백함수를 통해 설정할 수 있다.

단, 컴포넌트에 ref를 설정하여 직접 접근하는 방식은 어디까지나 DOM에 대한 직접적인 접근이 필요한 경우에만 사용해야지
자식 컴포넌트 내의 변수나 함수의 조작 및 수정등을 해서는 안된다는 점이다.
이는 state와 prop을 이용하는 React의 방식에 맞지 않으며 향후 관리적인 측면에서 큰 문제를 야기할 수 있다.

지금까지 ref의 설정과 사용에 대해 알아보았는데 여기서 적은 방법은 어디까지나 클래스 컴포넌트의 방식이며 함수형 컴포넌트에서는
대신 hook의 useRef() 함수를 통해 사용할 수 있으며 방식 자체는 React.createRef 함수와 유사하다.

출처자료

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=209354690 (리액트를 다루는 기술(개정판))