[ReactHooks] 2. useEffect

1. useTitle

- 문서의 제목을 update해주는 hook 

import { useEffect, useState } from "react";
import "./styles.css";

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

export default function App() {
  const titleUpdater = useTitle("Loding...");
  setTimeout(() => {
    titleUpdater("Home");
  }, 5000); // 5초 뒤에 title 변경 
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

 

2. useClick

- reference는 component의 어떤 부분을 선택할 수 있는 방법이다.
- 모든 component는 reference prop을 가지고 있다.
- useRef()는 document. getElementById() 와 같은 기능을 한다.
- htmlTag에 ref={이름} 와 같이 사용한다.
- reference는 {current: HTMLHeadingElement} 의 형식으로 값을 반환한다.
- useEffect에서 return한 함수는 componentWillUnmount 때 호출된다.
- 참고로 useEffect에서 return한 함수를 cleanup function(클린업 함수)라고 부릅니다.

- event 종류만 "click"에서 "mouseenter"로 바꾸면 useHover!

import { useEffect, useRef } from "react";
import "./styles.css";

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

  const element = useRef(); // reference 받아오기 element -> <h2>Hello</h2>
  
  useEffect( () => {
    // console.log(element.current);

    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("Hello");
  const title = useClick(sayHello);
  return (
    <div className="App">
      <h2 ref={title} >Hello</h2> // reference 추가 
    </div>
  );
}

 

3. useConfirm 

- useConfirm

- page를 닫기전 메세지를 page에 confirm 해준다. 

- ex) 이 페이지를 벗어나면 정보를 잃을 수도 있습니다.

- 함수를 인자로 받을 경우 전달 받은 인자가 함수인지 미리 확인해준다(for 안전성)

- window.confirm(message)는 화면에 confirm message를 띄우고 확인을 누르면 true를 반환한다. 

- useState, useEffect를 사용하지 않았으므로 hook은 사실 아니다. 

export const useConfirm = (message="", onConfirm, onCancle) => {
  if(!onConfirm || typeof onConfirm !== "function"){ // onConfirm이 존재하지 않거나 function이 아닌경우
    return;
  }
  if(onCancle && typeof onCancle !== "function"){ // onCancle이 존재하고 function이 아닌경우 -> onCancle은 필수는 아니다. 
    return;
  }
  const confirmAction = () => {
    if(window.confirm(message)){ // 확인을 누르면 true 
      onConfirm();
    } else {
      onCancle();
    }
  };
  return confirmAction;
};

 

4. usePreventLeave

- mouse가 page를 벗어나면 함수 호출 

- react hook 이름은 관습적으로 use를 붙어준다. 

- return 값이 없으므로 실행만 해주면 충분하다. 

export const useBeforeLeave = (onBefore) =>{
  if(typeof onBefore !== "function"){
    return;
  }
  useEffect(() => {
    document.addEventListener("mouseleave", onBefore);
    return () => document.removeEventListener("mouseleave", onBefore);
  }, []);
}

export default function App() {
  const begForLife = () => console.log("Plz don't go~");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}