리액트(html 요소에 직접 접근) (Ref)

CreateRef vs UseRef

리액트에서는 레퍼런스를 사용하기 위한 두 가지 방법이 존재하는데 바로 내장함수 CreateRef() 와 UseRef()이다. 

리액트에서 Component를 만드는 방법에는 두 가지가 있는데 바로 class를 사용하는 것과 functional하게 만드는 방법이다. 

 

원래 function 기반 component는 state를 가지는 것이 불가능했고 단지 부모로부터 props속성 값을 받아와서 보여주는 역할을 수행하는 간단한 component였으나 ReactHook이라는 개념이 도입된 후 부터 함수 내에서도 Use로 시작하는 함수들을 통해 class기반 component와 마찬가지로 state를 다룰 수 있는 기능들을 쓸 수 있게 되었고 이번 포스팅에서는 UseRef()함수를 이용한 html요소에 직접 접근할 수 있는 기능에 대해 설명해보겠다. 우선 CreateRef()함수는 class형 컴포넌트에서 사용하는 함수이다. 

 

나는 함수형 component에서 사용하는 useRef()의 사용법에 대해 알아보겠다. 

 

함수형 component에서는 render()함수 대신 꼭 return 값이 필요한데 

함수형 component에서의 return 값

return 값 안에는 html요소가 들어가게 된다. 이 때 ref를 사용하려면 

1. 변수에 useRef() 함수를 할당해준다. 

useRef()함수를 변수에 할당하는 과정

다른 함수내의 변수에서 value라는 변수에 ref의 값을 받아오는 과정

리턴 값에 존재하는 html요소의 속성으로 ref 다음 useRef를 할당한 변수의 이름을 준 모습

위와 같은 세 단계를 이용하면 우리는 input html요소에서 받아온 값과 같은 것을 직접 받아오는 것이 가능하다