[React Hooks] useEffect, useTitle, useClick

useEffect

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

export default function App() {
  const sayHello = () => console.log("hello");

  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);
  // component가 mount 되었을 때 실행
  // number가 바뀔 때만 실행
  // [number]을 dependency라고 한다.(매우중요)
  useEffect(sayHello, [number]);
  return (
    <div className="App">
      <div>Hi</div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  );
}

 

useTtitle

내 문서(html)의 제목을 업데이트 시켜주는 것을 담당하는 hooks이다.

이걸 하기위해서 보통 helmet을 사용하는데 지금은 functional hooks 의 방식으로 만들어보았다.

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

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  // useEffect는 component가 mount 될 때 updateTitle를 부를 것이다.
  useEffect(updateTitle, [title]);
  return setTitle;
};

export default function App() {
  const titleUpdater = useTitle("Loading...");
  // 5초뒤에 title이 Home으로 바뀐다
  setTimeout(() => titleUpdater("Home"), 5000);
  return (
    <div className="App">
      <div>Hi</div>
    </div>
  );
}

 

useRef는 getElementbyId와 같은 역할을 한다.

 

useClick

- 모든 것들은 reference가 있어서 작동하는 것이다.

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

const useClick = (onClick) => {
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
  });
  return element;
};

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

 

내가 function을 리턴받았다면 function은 componentWillUnMount로 부터 호출된 것이다.

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

const useClick = (onClick) => {
  if(typeof onClick !== "function"){
    return;
  }
  const element = useRef();
  // useEffect는 componentDidmount 상태에 동작한다.
  useEffect(() => {
    if (element.current) {
      element.current.removeEventListener("click", onClick);
      // componentWillUnmount일 때 이벹트가 발생한 뒤 정리한다.
    }
    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">
      <h1 ref={title}>Hi</h1>
    </div>
  );
}