[react] ref로 HTML 엘리먼트 제어

ref prop

React의 ref prop은 HTML 엘리먼트의 래퍼런스를 변수에 저장하기 위해 사용한다.

 

<input> 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기면 이 inputRef 객체의 current 속성을 통해 <input> 엘리먼트에 접근할 수 있고 DOM API를 이용하여 제어 할 수 있게된다.

<input ref={inputRef} />

 

useRef

ref prop에는 React API 중 current 속성을 갖는 특정 형태의 객체만이 할당 될 수 있다

클래스 기반 컴포넌트에서는 React.createRef() 함수를 사용하고

함수형 컴포넌트에서는 useRef()와 같은 훅(Hook)함수를 사용하여 객체를 생성할 수 있다.

 

 

예제. input 엘리먼트 제어

useRef Hook 함수를 이용하여 inputRef 객체를 생성한 후 <input> 엘리먼트의 ref prop으로 넘겨준다.

그러고 나면 inputRef 객체의 current 속성에는 <input>엘리먼트의 래퍼런스가 저장되어 <input>엘리먼트를 제어할 수 있게된다.

 

활성화 버튼을 누르면 input엘리먼트가 활성화되며 입력을 할 수 있게 된다.

초기화 버튼을 누르면 입력창에 입력했던 입력값들이 사라지고 input 엘리먼트가 비활성화된다.

 

 

 

 

 

결론

React로 웹 애플리케이션을 개발하다보면 HTML 엘리먼트를 직접 접근해서 DOM API를 이용해 제어 할 경우가 생기는데 이럴 때 사용할 수 있는 React API인 ref가 있다. 

 

하지만 ref prop 관련하여 주의할 점은 이런 HTML 엘리먼트를 직접 제어하는 방식은 예전 JQuery 시절에 주로 쓰이던 명령형 방식의 웹 프로그래밍이라는 것이다.

선언형방식의 프로그래밍 패러다임을 기반으로 하는 React를 포함한 모던 자바스크립트 라이브러리에서는 반드시 필요한 경우가 아니라면 이와 같은 접근 방식은 되도록 지양하는것이 좋다.