여기서 주의할 점이 하나 있습니다. 문법상으로는 onClick = {this.scrollBox.scrollBottom} 같은 형식으로 작성해도 틀린 것은 아닙니다. 하지만 컴포넌트가 처음 렌더링될 때는 this.scrollBox 값이 undefined이므로 this.scrollBox.scrollToBottom 값을 읽어 오는 과정에서 오류가 발생합니다. 화살표 함수 문법을 사용하여 아예 새로운 함수를 만들고 그 내부에서 this.scrollBox.scrollToBottom 메서드를 실행하면, 버튼을 누를 때(이미 한 번 렌더링을 해서 this.scrollBox를 설정한 시점) this.scrollBox.scrollToBottom 값을 읽어 와서 실행하므로 오류가 발생하지 않습니다.

자, 이제 코드를 저장하고 웹 브라우저에서 맨 밑으로 버튼을 눌러 보세요.

▲ 그림 5-9 맨 밑으로 버튼을 눌러 스크롤바를 맨 아래쪽으로 이동

 

스크롤바가 잘 움직이나요?