고차 컴포넌트란?

고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

고차 컴포넌트 특징

• HOC는 컴포넌트를 인자로 받아 다른 컴포넌트를 반환합니다.

• HOC는 원본 컴포넌트를 수정하지 않고 기능을 추가할 수 있습니다.

• HOC는 props를 통해 컴포넌트에 데이터나 동작을 주입할 수 있습니다.

import React, { useState, useEffect } from 'react';

// withAuthorization HOC
function withAuthorization(WrappedComponent, requiredRole) {
  return function(props) {
    const [user, setUser] = useState(null);

    useEffect(() => {
      // API나 로컬 스토리지에서 현재 로그인된 사용자 정보를 가져옵니다.
      // 예제를 위해 가상의 데이터를 사용합니다.
      const loggedInUser = {
        id: '12345',
        role: 'admin',
        token: 'abc.def.ghi',
      };
      setUser(loggedInUser);
    }, []);

    // 사용자가 필요한 권한을 갖고 있는지 확인합니다.
    const hasPermission = user && user.role === requiredRole;

    if (!hasPermission) {
      return <p>Sorry, you do not have the required permissions to view this.</p>;
    }

    return <WrappedComponent user={user} {...props} />;
  };
}

// 일반적인 함수형 컴포넌트
function AdminDashboard({ user }) {
  return (
    <div>
      <p>Welcome back, {user.id}!</p>
      <p>Your role: {user.role}</p>
      {/* ... 기타 관리자 대시보드 컴포넌트 */}
    </div>
  );
}

// HOC를 사용하여 컴포넌트 감싸기
const AuthorizedAdminDashboard = withAuthorization(AdminDashboard, 'admin');

export default AuthorizedAdminDashboard;

HOC 입맛에 맞게 만들기

• 텍스트 클릭 시 페이지 이동을 한다.

• 텍스트 클릭 시 페이지 이동 이외에 다른 클릭 이벤트 동작을 수행해야 합니다.

• 텍스트 클릭 시 이동하는 경로를 alert창을 통해 보여준다. (텍스트 형태 ‘href 로 이동합니다.’)

const LinkToAlert = ({children, href, onClick, createAlertMessage, ...props}) => {
	return <a href={href} onClick={() => {
		href && alert(createAlertMessage(href.toString()));
		onClick();
	}}>{children}</a>

}

<LinkToAlert href='/href' createAlertMessage={(href) => `${href}로 이동합니다.`}>href</LinkToAlert>

// withLinkAlert.js
const withLinkAlert = (createAlertMessage) => {
  return function LinkWithAlert({ href, onClick, ...props }) {
    return (
      <a
        href={href}
        onClick={(...args) => {
          href && alert(createAlertMessage(href.toString()));
          console.log(args);
          onClick && onClick(...args);
        }}
        {...props}
      />
    );
  };
};

export default withLinkAlert;

// App.js
function App() {
  const LinkWithAlert = React.useMemo(() => withLinkAlert((href) => `'${href}'로 이동합니다.`), []);
  return (
    <div className="App">
      <LinkWithAlert href="/href">href</LinkWithAlert>
    </div>
  );
}

HOC의 사용 시 주의사항

• Props 이름 충돌: HOC가 주입하는 props와 WrappedComponent의 props 이름이 충돌할 수 있습니다. 이를 방지하기 위해 prop 이름을 명확히 하거나, namespace를 사용하는 것이 좋습니다.

• Refs 전달: HOC를 사용할 때, ref는 자동으로 내부 컴포넌트로 전달되지 않습니다. 이를 해결하기 위해 React에서는 React.forwardRef API를 제공합니다.