[React] React Hook-2.2 useEffect를 활용한 useClick과 useRef

useRef

- reference : 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법으로 document.getElementByID()를 사용하는 것과 동일하다.

export default function App() {
  const focusInput = useRef();
  setTimeout(() => focusInput.current.focus(), 3000);
  return (
    <div className="App">
      <input ref={focusInput} placeholder="write here" />
    </div>
  );
}

 

- useRef 객체를 생성해 focusInput에 저장하고 이를 input 태그의 ref property로 지정한다.
- Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.
- setTimeout 함수를 사용하여 3초 뒤에 useRef 객체의 current에 focus(입력창에 focus 생성)를 주도록 한다.

 

 

 

< App.js >

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useClick = (onClick) => {
  if (typeof onClick !== "function") return;
  const element = useRef();
  useEffect(() => {
    if (element.current) element.current.addEventListener("click", onClick);
    return () => {
      if (element.current)
        element.current.removeEventListener("click", onClick);
    };
  }, []);
  return element;
};
export default function App() {
  const SayHello = () => console.log("say hello");
  const focusInput = useRef();
  const title = useClick(SayHello);

  setTimeout(() => focusInput.current.focus(), 3000);
  return (
    <div className="App">
      <h1 ref={title}>hi</h1>
      <input ref={focusInput} placeholder="write here" />
    </div>
  );
}

 

< useClick >

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useClick = (onClick) => {
  if (typeof onClick !== "function") return;
  const element = useRef();
  useEffect(() => {
    if (element.current) element.current.addEventListener("click", onClick);
    return () => {
      if (element.current) element.current.removeEventListener("click", onClick);
    };
  }, []);
  return element;
};

 

1.

const useClick = (onClick) => {
  if (typeof onClick !== "function") return;
  const element = useRef();

- 인자로 들어온 onClick이 funtion이 아니면 useClick 함수를 종료한다.

- useRef 객체를 생성하여 element 에 저장한다.

 

2.

  useEffect(() => {
    if (element.current) element.current.addEventListener("click", onClick);

- element.current가 존재하면 onClick event를 지정한다.

 

3.

    return () => {
        if (element.current)
            element.current.removeEventListener("click", onClick);
    };
  }, []);
  return element;
};

 

- componentWillUnmount일 때 event가 발생한 뒤 정리를 해주어야한다. 정리하기 위한 방법은 function을 return하는 것이다. 위 코드에서는 useEffect함수의 return 값으로 removeEventListener를 지정해주었다.

 

useEffect로부터 function을 return 받았다면 그 function은 componentWillUnmount로 부터 호출된 것이다.

 

 

< App() >

export default function App() {
  const SayHello = () => console.log("say hello");
  const focusInput = useRef();
  const title = useClick(SayHello);
  setTimeout(() => focusInput.current.focus(), 3000);
  return (
    <div className="App">
      <h1 ref={title}>hi</h1>
      <input ref={focusInput} placeholder="write here" />
    </div>
  );
}

- useClick의 onClick 함수로써 SayHello 함수를 전달한다.

- h1와 input 태그에 property로 ref를 지정해준다.

 

 

< 새로고침 후 화면 >

 

< 3초 후 화면 >

- input 태그에 focus가 활성화된다.

 

< h1 태그 click >

- h1 태그 click 시 onClick event 발생으로 sayhello 함수가 실행된다.