/ STUDY

실전형 React Hooks 10개 (2) - UseEffect

목차

UseEffect

특정 상황에만 함수를 실행시키고 싶은 경우 사용한다. useEffect는 function 그리고 dependency라는 두 개의 변수를 받는다. 여기서 dependency라는 변수는 말 그대로 해당 element에 변화가 발생하면 function을 발생시키는 친구라고 생각하면 된다.

그래서 보통 useEffect(function, [dependency]) 이런 형태로 사용된다. 주의할 점은 빈 array []의 경우 한 번만 실행되고 어떤 변화에도 재실행되지 않는 경우에 사용한다.

사용 예시

useTitle

구현 기능 : 웹페이지의 title을 변경하는 기능

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

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 5000);
};

useScroll

구현 기능 : scroll이 발생했을 때, 특정 범위를 만족하면 함수 실행

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0,
  });
  const onScroll = () => {
    setState({ y: window.scrollY, x: window.screenX });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return state;
};