Customhook vs HOC

nubim·2025년 2월 27일

커스텀 훅, HOC 모두 리액트에서 어떤 로직을 공통화 하기 위함 → 공통되는 로직을 따로 분리할 수 있다

커스텀 훅이 필요한 경우

useState, useEffect 등 리액트에서 제공하는 훅으로만 공통 로직을 격리할 수 있을 때
커스텀 훅 자체만으론 렌더링에 영향을 미치지 않는다
커스텀 훅의 반환값을 바탕으로 사용하는 쪽에서 원하는 대로 사용 가능하다, 때문에 HOC에 비해 상대적으로 Side Effect을 최소화 할 수 있다

useLogin 에서 제공하는 상태는 loggedIn 밖에 없다, 이 상태를 바탕으로 사용하는 쪽에서 후처리, 예를 들어 로그인 여부에 따른 처리를 원하는 대로 할 수 있다

import { useEffect } from 'react';
import { **useLogin** } from './useLogin';  // useLogin 훅을 import

function Component() {
  const { loggedIn } = **useLogin**();  // 로그인 상태를 가져옴

  useEffect(() => {
    if (!loggedIn) {
      // 로그인하지 않은 경우, 특정 작업을 수행
      // do something..
    }
  }, [loggedIn]);  // loggedIn 값이 변경될 때마다 useEffect가 실행됨
}

위의 코드보다 커스텀 훅에 대한 의존도를 높이면 다음과 같이 로그인 여부에 따른 컴포넌트를 반환해서 사용하는 쪽에서 가져다 쓰기만 하는 방식도 가능하다

import { useState } from 'react';

// 커스텀 훅에서 컴포넌트를 반환
function useLogin() {
  const [loggedIn, setLoggedIn] = useState(false);

  // 로그인 상태에 따라 반환되는 UI를 컴포넌트로 정의
  const LoginComponent = () => {
    return (
      <div>
        <button onClick={() => setLoggedIn(true)}>Login</button>
        {!loggedIn && <p>Please log in</p>}
      </div>
    );
  };

  // 로그인 상태에 따른 로직과 컴포넌트 반환
  if (loggedIn) {
    return <div>Welcome, you are logged in!</div>;
  } else {
    return <LoginComponent />;
  }
}

function App() {
  const **LoginUI** = useLogin();  // 커스텀 훅을 호출하여 반환된 UI 컴포넌트

  return (
    <div>
      {**LoginUI**}
    </div>
  );
}

고차 컴포넌트(HOC)가 필요한 경우
- 특정 상황에 적합한 때가 있다
  - 로그인 여부에 따라서 로그인 해야 보여지는 컴포넌트는 감추고 로그인 컴포넌트를 노출할 때
  - 에러 바운더리와 유사하게 특정 에러가 발생했을 때 현재 컴포넌트가 아닌 에러를 알릴 수 있는 에러 알림 담당 컴포넌트가 필요할 때
```
import { withLoginComponent } from './withLoginComponent';

const Component = withLoginComponent(() => {
  // 고차 컴포넌트에서 어떤 처리 후에 아래 인사말을 렌더링
  return <>안녕하세요.</>; 
});
```

nubim

이전 포스트

React Custom hook

다음 포스트

Customhook vs HOC

React Custom hook

useLayoutEffect

0개의 댓글