[React/실전형 리액트 Hooks/노마드코더] #2.2 useClick

 

강의 출처

 

https://youtu.be/0BuVYgM86gA

 

 

 

 

 

---

 

 

useClick 함수를 생성하기 이전에 reference에 대해 알아보자 !

 

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const refInput = useRef();  //documnet.getElementByID()를 사용하는 것과 동등한 효과를 줌
  setTimeout(() => refInput.current.focus(), 5000);
  return (
    <div className="App">
      <div>Hi</div>
      <input ref={refInput} placeholder="la" />
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

이 코드는 useRef 훅을 사용하여 특정 요소에 접근하는 방법을 보여주는 간단한 예제이다.

useRef 훅을 사용하여 refInput이라는 변수를 생성한다.

이 변수는 input 요소에 대한 참조를 저장하는 역할을 한다.

setTimeout 함수를 사용하여 5초 후에 refInput 요소에 포커스를 설정한다.

refInput.current를 사용하여 요소에 접근하고, focus() 메서드를 사용하여 포커스를 설정한다.

App 컴포넌트에서는 useRef 훅을 사용하여 refInput 변수를 생성하고,

input 요소에 ref 속성을 추가하여 refInput 변수에 요소를 연결한다.

placeholder 속성은 빈 input 요소에 보여줄 안내 메시지를 지정한다.

따라서, 이 코드는 useRef 훅을 사용하여 특정 요소에 접근하는 방법을 보여주는 예제이다.

5초 후에 input 요소에 포커스가 설정되는 것을 확인할 수 있다.

 

 

실행 결과

 

 

실행 후 5초 경과 시 focus 설정됨

 

 

 

 

---

 

useClick

 

 

 

useEffect는 componentWillUnmount 때 발생하게 되는데 useClick의 return이 앞으로 발생할 일이다.

그래서 useEffect 안에 function을 넣으면 componentDidMount, componentDidUpdate 때 호출된다.

(dependency가 존재하지 않는 한)

 

만약 dependency가 존재한다면 useEffect안에 함수는 componentDidMount일 때만 호출될 것이다.

componenetWillUnMount일 때는 return 된다.

 

만약 function을 return 한다면 

useEffect를 return 받은 그 함수는 componentWillUnMount 때 호출될 것이다.

 

 

 

 

---

 

 

useClick 코드 만들어보기

 

import { type } from "@testing-library/user-event/dist/type";
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const useClick = (onClick) => {
  const element = useRef();
  useEffect(() => { //sayHello를 가진 useClick이 mount 되었을 때 call
    if(typeof onClick !== "function") { //function이 아니라면 return
      return;
    }
    if(element.current) {
      element.current.addEventListener("click", onClick); //click 이벤트 추가
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []); //dependency는 없다.
  return typeof onClick !== "function" ? undefined: element;
}

const App = () => {
  const sayHello = () => console.log("say Hello");
  const title = useClick(sayHello);
  return (
    <div className="App">
      <h1 ref={title}>Hi</h1>
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

이 코드는 React와 Hooks를 사용하여,

useClick 커스텀 훅을 만들어서 DOM 요소가 클릭되었을 때 특정 함수를 호출할 수 있도록 하는 코드이다.

 

먼저, useClick 함수를 보면,

onClick 파라미터로 전달된 함수가 function 타입이 아니면 리턴하고,

function이면 useRef()를 사용하여 element 변수를 생성한다.

이 element 변수는 이후 클릭 이벤트를 추가할 DOM 요소를 참조하기 위한 용도로 사용된다.

 

useEffect() 훅을 사용하여, 컴포넌트가 처음 마운트될 때, element.current에 click 이벤트를 추가한다.

만약, onClick 파라미터가 function이 아니라면 아무 일도 하지 않는다.

 

그리고, 컴포넌트가 unmount 될 때, 이전에 추가한 click 이벤트를 제거한다.

이렇게 하면, 메모리 누수(memory leak)를 방지할 수 있다.

 

App 컴포넌트에서는, useClick 함수를 호출하여 반환된 element를 h1 요소의 ref 속성에 할당한다.

이렇게 함으로써, h1 요소가 클릭되면 sayHello 함수가 호출된다.

 

마지막으로, ReactDOM.render() 함수를 호출하여 App 컴포넌트를 root 요소에 렌더링 한다.

 

 

 

 

정리

1. componentWillMount
: reder 전에 componentWillMount 실행, => element 의 click 이벤트 없애줌

2. render
: 페이지가 redering 됨

3. componentDidMount
redering이 된 후에 componentDidMount 실행 => click 이벤트 등록 'sayHello'

4. [] 의사용
dependency 에 아무것도 들어가 있지 않음 => 페이지가 redering 될 때 한 번만 동작

결과 : 클릭 이벤트 지우고 - 렌더링 하고 - 클릭이벤트 등록하고 - 한 번만 로딩되니까 중복으로 클릭이벤트 등록 될 일 없음

 

 

 

 

실행결과

 

 

아래는 예제 코드 실행 결과이다.

 

 

"Hi"를 클릭하자 콘솔창에 "say Hello"가 출력되었다.