⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

Ref와 DOM

Ref를 사용해야 할 때

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

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

• 즉, state나 prop으로 해결될 수 있는 상황을 얘기한다.
• Dialog 컴포넌트에서 창을 열고 닫을 때 ref로 DOM 노드에 접근하여 open(), close()
  메서드를 바인딩하지말고 isOpen과 같은 state 또는 prop을 넘겨주어 해결하는 것이 좋다.

Ref에 접근하기

// render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때,
// 그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 된다.
const node = this.myRef.current;

ref 어트리뷰트가 HTML 엘리먼트에 쓰였을 때

생성자에서 React.createRef()로 생성된 ref는 자신을 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로서 받는다.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    this.textInput.current.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

ref 어트리뷰트가 커스텀 클래스 컴포넌트에 쓰였을 때

ref 객체는 마운트된 컴포넌트의 인스턴스를 current 프로퍼티의 값으로서 받습니다.

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
			// CustomTextInput이 클래스 컴포넌트일 때만 작동
			// class CustomTextInput extends React.Component{ }
      <CustomTextInput ref={this.textInput} />
    );
  }
}

ref 어트리뷰트는 함수 컴포넌트에서 사용할 수 없다.

function MyFunctionComponent() { // 함수 컴포넌트
  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    // 이 코드는 동작하지 않는다.
    return (
      <MyFunctionComponent ref={this.textInput} />
    );
  }
}

단, DOM 엘리먼트나 클래스 컴포넌트의 인스턴스에 접근하기 위해 ref 어트리뷰트를 함수 컴포넌트에서 사용하는 것은 된다.

function CustomTextInput(props) {
  // textInput은 ref 어트리뷰트를 통해 전달되기 위해서 꼭 
  const textInput = useRef(null);

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

부모 컴포넌트에게 DOM ref를 공개하기

ref 전달하기는 컴포넌트가 자식 컴포넌트의 ref를 자신의 ref로부터 외부에 노출시키게 한다.

부모 컴포넌트가 ref를 내려주면 자식 컴포넌트는 전달받은 ref에 자신의 ref를 담아 올려주는 것이라고 생각하면 된다.

콜백 ref

• React 16.3 이전버전이라면 콜백 ref를 대신 사용

Render Props

횡단 관심사를 위한 render props 사용법

// 웹 애플리케이션에서 마우스 위치를 추적하는 로직
class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }
	
  // 스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 <p>에 나타남
  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

다른 컴포넌트에서 코드를 재사용하려면?

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>

        {/*
          <Mouse>가 무엇을 렌더링하는지에 대해 명확히 코드로 표기하는 대신,
          `render` prop을 사용하여 무엇을 렌더링할지 동적으로 결정할 수 있다.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
				{// render 함수에 prop으로 전달해줌 } 
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

즉, render prop은 무엇을 렌더링할지 컴포넌트에 알려주는 함수이다.

HOC(higher-order-components)패턴에 render props pattern을 적용할 수 있다.

function withMouse(Component) {
  return class extends React.Component {
    render() {
      return (
        <Mouse render={mouse => (
          <Component {...this.props} mouse={mouse} />
        )}/>
      );
    }
  }
}

render 이외의 Props 사용법

어떤 함수형 prop이든 render prop이 될 수 있다.

// render보다 children을 더 쉽게 사용할 수 있다.
<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

주의사항

React.PureComponent에서 render props pattern을 사용할 땐 주의해야 한다.

class Mouse extends React.PureComponent {
  // 위와 같은 구현체...
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        {/*
         <MouseTracker>가 렌더링 될 때마다 <Mouse render>의 prop으로 넘어가는
					함수가 계속 새로 생성된다.
        */}
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

따라서 아래처럼 메서드를 사용해서 prop을 정의해야 한다.

class MouseTracker extends React.Component {
  // `this.renderTheCat`를 항상 생성하는 매서드를 정의
  // 이것은 render를 사용할 때 마다 *같은* 함수를 참조
  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }

  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }
}

Refer

• Ref와 DOM- React 공식문서
• Render Props - React 공식문서