[React] React(6)

❗❗  데브코스 53일차 (10.13)

53일차 두 번째 시간 또한, 컴포넌트 연습하기로 진행된다.

또한 사용자 정의 Hook 만드는 연습도 진행된다.

사용자 정의 Hook 코드 하나를 예시로 설명을 하겠다.

 

✅ useHover - 마우스 hover Hook

마우스를 컴포넌트에 올렸을 때, 올리지 않았을 때 처리를 위한 Hook이다.
이와 같은 useHover Hook은 많이 사용된다.
버튼에 hover 했을 때 css 처리, 이벤트 발생 등등 다양하게 사용할 수 있다.

import { useCallback, useEffect, useState, useRef } from "react";

const useHover = () => {
  const [state, setState] = useState(false);
  const ref = useRef(null);

  const handleMouseOver = useCallback(() => setState(true), []);
  const handleMouseOut = useCallback(() => setState(false), []);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    element.addEventListener("mouseover", handleMouseOver);
    element.addEventListener("mouseout", handleMouseOut);

	// useEffect에서 이벤트를 등록할 때는
    // 꼭 정리(clean-up)를 해줘야한다.
    return () => {
      element.removeEventListener("mouseover", handleMouseOver);
      element.removeEventListener("mouseout", handleMouseOut);
    };
    // 위에서 handleMouseOver, handleMouseOut useCallback을 통해 메모리제이션을 이용하여
    // 의존성에 굳이 넣어줄 필요가 없지만 추후에 생성되는 로직이나 이벤트에서 handle 관련 함수 로직이 
    // 바뀔 가능성을 염두해서 의존성에 넣어준다.
  }, [ref, handleMouseOver, handleMouseOut]);

  return [ref, state];
};

export default useHover;

1. hover 상태를 저장하기 위한 state 선언
2. hover mouseOVer, Out에 대한 함수 로직 작성
3. useEffect를 통해 이벤트를 등록하고 마지막에 return (clean-up) 을 통한 함수 반환
   • effect는 한 번이 아니라 렌더링이 실행되는 때마다 실행된다. React가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect 또한 정리하는 이유가 바로 이 때문이다.
   • 메모리 누수방지 : 컴포넌트가 언마운트될 때, return을 통해 해당 이벤트를 정리해주는데 이것을 정리해주지 않으면 메모리 차원에서 가지고 있기 때문에 최적화에 문제가 생길 수도 있다.
   • sideEffect 방지: setTimeout과 같은 hook을 사용한다고 했을 때, 페이지 이동하거나 컴포넌트가 사라졌을 때 timeOut이 그대로 남아있어서 실행되는 버그가 발생할 수 있다.!
4. 의존성 추가
5. 상태값 반환

 

📚 useHover 컴포넌트 사용법 - StoryBook 코드

import styled from "@emotion/styled";
import useHover from "../../hooks/useHover";

export default {
  title: "Hook/useHover",
};

// 시각적인 효과를 위해 BOX컴포넌트 사용
const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
`;

export const Default = () => {
  const [ref, hover] = useHover();

  return (
    <>
      <Box ref={ref} />
      {hover ? <div>ToolTip!</div> : null}
    </>
  );
};

1. 테스트를 위해 Box 컴포넌트 생성
2. useHover Hook을 통해 값 받아오기
3. hover가 필요한 곳에 ref와 해당 이벤트를 달아준다.

위의 코드 상황에서는 마우스를 박스 컴포넌트에 hover했을 때, "ToolTip"이라는 메세지가 보이고,

마우스가 out되면 아무런 text도 보이지 않는다.

 

👨‍💻 사용자 정의 Hook 즉, custom Hook의 원리와 사용법에 대해 학습할 수 있었던 기회이다.

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다는 장점을 알 수 있었다.

 

📖 학습한 내용

• React(6) - 컴포넌트 연습하기
  
  • Skeleton
  • Flux
  • Breadcrumb
  • Tab
  • useHover
  • useScroll