React HOC란?

nevermind·2023년 1월 10일

기술면접

목록 보기

24/25

HOC(Higher-Order-Component)

고차 컴포넌트라고 불리우는 HOC는 컴포넌트를 매개 변수로 받아 새로운 컴포넌트로 반환하는 함수를 의미한다
HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하여 컴포넌트의 재사용성을 늘리는 역할을 한다
HOC는 with로 시작하는 컨벤션으로 파일을 작성한다

예제

이미지를 화면에 여러개 띄우고 각 이미지의 hover이벤트에 어떤 로직을 추가하고자함

//withHover.jsx
import { useState } from "react";

export default function withHover(InnerComponent) {
  return (props) => {
    const [isHovered, setIsHovered] = useState(false);

    function handleMouseEnter() {
      setIsHovered(true);
    }

    function handleMouseLeave() {
      setIsHovered(false);
    }

    return (
      <InnerComponent
        {...{
          ...props,
          handleMouseEnter,
          handleMouseLeave,
          isHovered
        }}
      />
    );
  };
}

//ImageBox.jsx
import withHover from "../hoc/withHover";

function ImageBox({
  imageUrl,
  imageTitle,
  isHovered,
  handleMouseEnter,
  handleMouseLeave
}) {
  return (
    <div>
      {isHovered && <div id="hover">{imageTitle}</div>}
      <img
        src={imageUrl}
        alt={imageTitle}
        width="400px"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      />
      <h5>이미지에 마우스를 올리면 이미지 제목이 표시됩니다.</h5>
    </div>
  );
}
//Image를 withHover로 보낸다
export default withHover(ImageBox);

각 컴포넌트별로 mousehover 이벤트를 줄 수 있다

HOC의 단점

암묵적인 props 전달
컴포넌트 구조의 복잡성 유발
props 네이밍 중복

Hooks

HOC 패턴을 대신하여 재사용로직을 위한 Hooks등장

import { useContext } from "react";
import { LoginContext } from "../context/LoginContext";

export default function useLogin() {
  const { isLogined, setIsLogined } = useContext(LoginContext);
  function loginAlert() {
    if (!isLogined) {
      alert("로그인 후 진행해주세요.");
    } else {
      alert("로그인이 완료된 상태에요^^");
    }
  }

  return { isLogined, setIsLogined, loginAlert };
}