리액트 배우기( ref )

App.js

 

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;

 

------------------------------------------------------------------------------------------------

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;