사용자 정의 훅과 고차 컴포넌트

사용자 정의 훅과 고차 컴포넌트: 무엇을 써야 할까?

리액트는 다양한 컴포넌트와 훅을 통해 효율적인 개발 환경을 제공합니다. 그 중에서도 사용자 정의 훅과 고차 컴포넌트(Higher-Order Components, HOC)는 코드의 재사용성을 높이는 중요한 기법입니다. 이 블로그 포스트에서는 사용자 정의 훅과 고차 컴포넌트의 차이점과 사용 시기를 예제와 함께 살펴보겠습니다.

사용자 정의 훅 (Custom Hooks)

사용자 정의 훅은 리액트 훅을 기반으로 개발자가 필요한 훅을 만드는 기법입니다. 사용자 정의 훅의 이름은 반드시 use로 시작해야 하며, 이는 해당 함수가 리액트 훅이라는 것을 바로 인식할 수 있게 해줍니다.

사용자 정의 훅의 주요 특징은 다음과 같습니다:

• 리액트 훅을 조합하여 복잡한 로직을 캡슐화할 수 있습니다.
• 재사용 가능하며, 여러 컴포넌트에서 동일한 로직을 쉽게 공유할 수 있습니다.
• 그 자체로는 렌더링에 영향을 미치지 않으므로, 반환된 값을 바탕으로 컴포넌트가 어떤 동작을 할지는 개발자에게 달려 있습니다.

사용자 정의 훅 예제

다음은 API 호출을 처리하는 간단한 사용자 정의 훅 예제입니다:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetch;

위 예제에서 useFetch 훅은 데이터를 가져오는 로직을 캡슐화하여, 컴포넌트에서 쉽게 사용할 수 있게 합니다:

import React from 'react';
import useFetch from './useFetch';

function DataDisplay() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default DataDisplay;

고차 컴포넌트 (Higher-Order Components, HOC)

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 방법으로, 하나의 컴포넌트를 입력받아 새로운 컴포넌트를 반환하는 함수입니다. 이는 자바스크립트의 일급 객체와 함수의 특징을 활용하여, 리액트 외의 자바스크립트 환경에서도 사용할 수 있습니다.

리액트에서 가장 유명한 고차 컴포넌트 중 하나는 React.memo입니다.

고차 컴포넌트 예제

다음은 인증을 처리하는 고차 컴포넌트 예제입니다:

import React from 'react';

function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const isAuthenticated = // 인증 로직 구현

    if (!isAuthenticated) {
      return <div>Please log in</div>;
    }

    return <Component {...props} />;
  };
}

export default withAuth;

위 예제에서 withAuth HOC는 인증된 사용자만 원본 컴포넌트를 볼 수 있도록 합니다:

import React from 'react';
import withAuth from './withAuth';

function ProtectedComponent() {
  return <div>This is a protected component</div>;
}

export default withAuth(ProtectedComponent);

사용자 정의 훅과 고차 컴포넌트 중 무엇을 사용할까?

• 사용자 정의 훅: 단순히 useEffect, useState와 같은 리액트 훅으로 공통 로직을 격리할 수 있다면 사용자 정의 훅을 사용하는 것이 좋습니다. 사용자 정의 훅은 컴포넌트 내부에 미치는 영향을 최소화하여, 개발자가 훅을 원하는 방향으로만 사용할 수 있다는 장점이 있습니다.

• 고차 컴포넌트: 컴포넌트에 접근하려 할 때 애플리케이션 관점에서 컴포넌트를 감추고 로그인을 요구하는 등의 공통 컴포넌트를 노출하는 것이 좋을 경우에 사용합니다. HOC는 렌더링 로직을 재사용하고, 컴포넌트를 래핑하여 다양한 기능을 추가할 수 있는 유연성을 제공합니다.

결론적으로, 공통 로직의 격리와 재사용이 필요한 경우 사용자 정의 훅을 사용하고, 컴포넌트의 렌더링 로직을 재사용하거나 컴포넌트를 래핑하여 기능을 추가해야 할 경우 고차 컴포넌트를 사용하는 것이 좋습니다.