<aside> 🔥 DOM에 직접 접근할 때 ref를 사용하지만 ref를 사용하지 않고 기능을 구현할 수 있는지 확인하자.
</aside>
state를 사용해서 대부분의 일을 해결할 수 있지만 가끔 해결할 수 없는 기능이 있다.
아래 상황들에는 어쩔 수 없이 DOM에 접근해야하며, 이를 위해 ref를 사용해야한다.
가장 기본적인 방법이다.
ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다.
그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해준다.
<input ref={(ref)=>{this.input=ref}} />
리액트 내장함수인 createRef라는 함수를 사용하는 것이다.
아래 코드와 같이 컴포넌트 내부에서 변수로 React.createRef()를 담아주고 ref를 달고자 하는 요소에
props로 ref를넣어준다.