[ReactJS] Hooks(4)

useClick

처음보는 useRef라는 함수가 등장했다. component의 어떤 부분을 선택하는 함수라고 한다.

const element = useRef();

return <>
  	<h1 ref={element}>useRef가 가져가는 부분</h1>
  </>

element가 가지는 값은 <h1>태그가 된다. 다른 이벤트와 함께 동작시킬 때 유용하다.

useEffect의 cleanup-function 기능도 사용되었다. useEffect 내부의 return으로, 이는 WillUnmount를 의미한다. 렌더링이 끝나고 페이지를 벗어났을 때 이벤트를 완전히 종료시킨다. 이렇게 하는 이유는 Unmount할 때 이벤트를 강제로 지우지 않으면 여전히 살아있기 때문이라고 한다. 역시 메모리 관리 차원인가? 아직은 잘 모르겠다. cleanup-function을 사용하는 이유가 완전히 Unmount하기 위함이니까 아마도 맞겠지? 이 부분은 좀 더 찾아봐야겠다.

아무튼, element는 <h1>를 가지게 되었고, click 이벤트를 발생시킴에 따라 <h1> 영역을 누르면 바로 아래 count가 1씩 증가한다. 인자와 태그 내 reference만 변경해주면 어떤 태그에서도 click 이벤트를 사용할 수 있는 hook이다.