onClick함수에서 초기 렌더링 시 오류날 수 있는 상황

<ScrollBox ref={(ref) => this.scrollBox=ref} />
<button onClick={() => this.scrollBox.scrollToBottom()}>
맨 밑으로
</button>

위 코드에서 문법상으로 onClick 함수는

onClick = {this.scrollBox.scrollToBottom}

의 형식으로 작성해도 되지만, 컴포넌트가 처음 렌더링될 때 this.scrollBox 값이 undefined 이므로 오류가 발생한다.

따라서 화살표 함수 문법을 사용하여 새로운 함수를 만들고 그 내부에서 메서드를 실행하면 이미 한 번 렌더링을 해서 값을 읽어온 시점이기 때문에 오류가 발생하지 않는다.

onClick 함수 안에 콜백 함수를 넣어주면 즉시 실행되는 것을 막아주고 클릭시에만 호출된다.