ref를 사용해야하는 상황

<aside> 🔥 DOM에 직접 접근할 때 ref를 사용하지만 ref를 사용하지 않고 기능을 구현할 수 있는지 확인하자.

</aside>

state를 사용해서 대부분의 일을 해결할 수 있지만 가끔 해결할 수 없는 기능이 있다.

아래 상황들에는 어쩔 수 없이 DOM에 접근해야하며, 이를 위해 ref를 사용해야한다.

ref를 사용하는 방법

첫번째. 콜백 함수를 통한 ref 설정

가장 기본적인 방법이다.

ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다.

그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해준다.

<input ref={(ref)=>{this.input=ref}} />

두번째. createRef를 통한 ref 설정

리액트 내장함수인 createRef라는 함수를 사용하는 것이다.

아래 코드와 같이 컴포넌트 내부에서 변수로 React.createRef()를 담아주고 ref를 달고자 하는 요소에

props로 ref를넣어준다.