컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요

미해결질문
이태장 프로필

강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 5.3 검포넌트에 ref 달기

[ ScrollBo.js ]

import React, { Component } from 'react';

class ScrollBox extends Component {

scrollToBottom = () => {

const { scrollHegiht, clientHeight } = this.box;

console.log("scrollHegiht : " + scrollHegiht);

console.log("clientHeight : " + clientHeight);

this.box.scrollTop = scrollHegiht - 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}}>

    );

}

export default ScrollBox;

[App.js]

import React, { Component } from 'react';

import ScrollBox from './ScrollBox';

class App extends Component {

render() {

return (

this.scrollBox=ref} />

this.scrollBox.scrollToBottom()}>

맨 밑으로

}

);

}

}

export default App;

위 2개의 js를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.

제가 어떤 부분을 코딩을 잘 못 한 건 가요?

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스