- createRef를 사용하여 컴포넌트 내부에서 멤벼변수로 React.createRef()를 담아줌
- 해당 멤버 변수를 ref를 달고자 하는 요소에 ref.proprs로 넣어줌
- this.input.current를 조회하면 DOM에 접근 가능(콜백과는 달리.current를 넣어주어야 함)
..상위 App컴포넌트에서 사용할 때
<div>
<ScrollBox ref={(ref) => this.scrollBox=ref} />
<button onClick={() => this.scrollBox.scrollToBottom()}>
맨 밑으로
</button>
...
onClick = {this.scrollBox.scrollToBottom}으로 해도 문법상 문제가 없으나,
처음 컴포넌트가 렌더링 될 때 this.scrollBox이 undefined라 오류 발생
-() => 를 사용해서 버튼 누른 시점에서만 값을 읽어오도록 해야
ref란?
ref가 필요없는 경우
ref를 사용 하는경우
기본적인 방법 : 콜백 함수를 사용하는 것
<input ref={(ref) => {this.input=ref}} />
두번째 방법 - createRef를 사용
handleFocus = () => { this.input.current.focus(); }
render() { return (
} }
컴포넌트에 ref 달기
onClick = {this.scrollBox.scrollToBottom}
으로 해도 문법상 문제가 없으나,this.scrollBox
이undefined
라 오류 발생 -() =>
를 사용해서 버튼 누른 시점에서만 값을 읽어오도록 해야정리