Component 에 ref 설정하기

1. 자식 Component 만들기 - ScrollBox.js

import React, { Component } from "react";
 
class ScrollBox extends Component {
  scrollToBottom = () => {
    const { scrollHeight, clientHeight } = this.box;
 
    this.box.scrollTop = scrollHeight - clientHeight;
  };
 
  render() {
    const style = {
      border: "1px solid black",
      height: "300px",
      width: "300px",
      overflow: "auto",
      position: "relative",
    };
 
    const innerStyle = {
      width: "100%",
      height: "650px",
      background: "linear-gradient(white,black)",
    };
 
    return (
      <div
        style={style}
        ref={(ref) => {
          this.box = ref;
        }}
      >
        <div style={innerStyle} />
      </div>
    );
  }
}
 
export default ScrollBox;
 

2. 부모 Component 에서 자식 Component에 ref 달기

import React, { Component } from "react";
import ScrollBox from "./ScrollBox";
 
class App extends Component {
  render() {
    return (
      <div>
        <ScrollBox ref={(ref) => (this.scrollBox = ref)} />
        <button onClick={() => this.scrollBox.scrollToBottom()}>
          맨 밑으로
        </button>
      </div>
    );
  }
}
 
export default App;