이번 포스팅에서는 useClick라는 hooks을 다뤄보겠습니다.
useClick은 매우 간단한 hooks이지만 이를 다루기전에 references라는 것에 대하여 말해야 할 필요가 있습니다.
그래서 우선 references를 만들어 보겠습니다.
reference는 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법입니다.
document.getElementByID()를 사용하는 것과 동등하다고 생각하시면 됩니다.
위의 코드에서 우리는 cons input = useRef(); 라고 useRef()를 사용한다고 선언해주고 바로 밑에 setTimeout을 주어서 1초뒤에 input.current.focus() 콜백함수가 발생하도록 하고 있습니다. 따라서 페이지 로드후 1초뒤에 input reference를 가지고 있는 요소에 포커스를 주겠다고 하는 것이고 이는 해당 코드에 존재하는 input창을 뜻하게 됩니다.
이제 reference에 대하여 이해하였습니다.
이제 useClick에 대하여 알아보겠습니다.
우선 코드가 이렇게 있고 차례대로 뜯어봅시다. 우선 App을 보면
웹의 해당 텍스트가 h1요소에 ref로 title을 가지고 있습니다. 그리고 우리는 useClick를 통해여 useRef를 만들었습니다.
그리고 우리는 주어진 reference를 title에 주었습니다.
그 다음 useEffect는 reference 안에 있는 element.current가 있는지 확인을 한 다음 그 조건이 만족되면 click 이벤트를 부여하게 됩니다. 따라서 웹의 텍스트를 클릭해보면
해당 함수가 호출되게 됩니다. 함수가 호출되면 당연히 콘솔에는 sayHello가 찍히게 되겠죠?
당연히 찍힙니다.
이전 포스팅을 봐온 분들은 useEffect가 무언가 이상하다고 느끼실겁니다. useEffect는 componentDidmount 상태에 동작하고 그래서 해당 코드에서는 component가 mount 되는 경우 event를 추가해줍니다.
componentWillUnMount일때 이벤트가 발생하면 그 뒤에 정리를 해줘야하므로 추가적인 작업이 필요합니다.
코드를 한번 이렇게 해봅시다. 여기서 useClick component는 ref에 해당하는 element를 반환합니다. 그런데 우리는 App에서 title이라는 변수에 현재 useClick를 주었습니다.
이 말은 결국 title과 같은 ref의 element만 반환하게 된다는 것이고, 태그가 h1인 것이 반환된다는 것 입니다.
useEffect를 사용함은 리렌더링시 이벤트 발생을 위해서 이고, 리렌더링 될때 if 문으로 조건을 주어 활동을 나눴습니다.
element안에 current가 존재한다면 addEventListener로 onClick 이벤트를 추가하고 const title = useClick(sayHello)를 넣기 때문에 sayHello자체가 onClick으로 정의되게 됩니다. 따라서 위의 useClick Hook은 클릭에 따라서 console창에 문구를 다르게 넣는 것을 만들어 본것입니다.
useEffect는 return 값을 주지 않으면 componentDidMount(컴포넌트 실행 완료), componentDidUpdate(컴포턴트 업데이트 완료)일 때만 실행이 되는데 만약에 componentWillUnMount(컴포넌트 제거)일 때도 effect를 추가하고 싶다면 return 에다가 function을 추가하면 됩니다. 이는 리렌더링이 아닐 때는 event를 추가하기 싫으니 function을 추가해준 것이고, componentWillUnMount(컴포넌트 제거)에는 removeEventListener로 이벤트를 제거해준 것입니다.
해당 포스팅의 전체 코드는 다음과 같습니다. 이상입니다.
이상입니다. 감사합니다!!
