Blog

도입 – 학습 목표 및 필요성

React 컴포넌트 설계 패턴은 현대 웹 개발에서 필수적인 기술입니다. 복잡한 애플리케이션을 구축할 때 컴포넌트를 어떻게 설계하느냐에 따라 코드의 재사용성, 유지보수성, 그리고 팀 협업 효율성이 크게 달라집니다. 이 튜토리얼에서는 실무에서 가장 많이 사용되는 컴포넌트 설계 패턴들을 단계별로 학습하고, 실제 프로젝트에 바로 적용할 수 있는 실전 예제를 통해 마스터하게 됩니다. 컴포넌트 설계의 기본 원칙부터 고급 패턴까지, 체계적으로 학습하여 더 나은 React 개발자로 성장할 수 있습니다.

기본 개념 설명

컴포넌트 설계 패턴이란 반복적으로 발생하는 문제를 해결하기 위한 검증된 설계 방법론입니다. React에서는 크게 다섯 가지 핵심 패턴이 있습니다.

1. Container/Presentational 패턴: 로직과 UI를 분리하여 관심사를 명확히 구분합니다. Container는 데이터 fetching과 상태 관리를 담당하고, Presentational은 순수하게 UI 렌더링만 담당합니다.

2. Compound Component 패턴: 여러 컴포넌트가 하나의 단위로 동작하며, 내부 상태를 공유합니다. Select와 Option처럼 함께 사용되는 컴포넌트에 적합합니다.

3. Render Props 패턴: 함수를 prop으로 전달하여 컴포넌트 로직을 재사용합니다.

4. Custom Hooks 패턴: 상태 로직을 추출하여 여러 컴포넌트에서 재사용 가능하게 만듭니다.

5. HOC(Higher-Order Component) 패턴: 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하여 기능을 확장합니다.

단계별 구현 가이드

Step 1: Container/Presentational 패턴 구현

먼저 가장 기본이 되는 Container/Presentational 패턴부터 시작합니다. 이 패턴은 비즈니스 로직과 UI를 분리하여 테스트와 유지보수를 쉽게 만듭니다.

Container 컴포넌트는 데이터 fetching, 상태 관리, 이벤트 핸들러 등 로직을 담당합니다. Presentational 컴포넌트는 props를 받아 UI만 렌더링하며, 가능한 한 stateless로 유지합니다.

Step 2: Custom Hooks로 로직 추출

React Hooks를 활용하면 상태 로직을 컴포넌트에서 분리할 수 있습니다. 예를 들어, API 호출 로직은 useEffect와 useState를 조합한 커스텀 훅으로 추출합니다.

useUser, useFetch, useForm과 같은 커스텀 훅을 만들면 여러 컴포넌트에서 동일한 로직을 재사용할 수 있습니다. 이는 코드 중복을 줄이고 테스트를 용이하게 만듭니다.

Step 3: Compound Component 패턴 적용

복잡한 UI 컴포넌트를 설계할 때는 Compound Component 패턴이 유용합니다. Context API를 활용하여 부모-자식 간 상태를 암묵적으로 공유합니다.

예를 들어, Tabs 컴포넌트를 만들 때 Tabs.List, Tabs.Tab, Tabs.Panel로 나누고, 내부적으로 선택된 탭 상태를 Context로 공유합니다. 이렇게 하면 API가 직관적이고 유연해집니다.

Step 4: Render Props로 유연성 확보

Render Props 패턴은 컴포넌트의 렌더링 로직을 외부에서 제어할 수 있게 합니다. 특히 로딩 상태, 에러 처리 등을 다양한 방식으로 표현해야 할 때 유용합니다.

DataFetcher 컴포넌트를 만들고, render prop을 통해 데이터, 로딩, 에러 상태를 전달하면 호출하는 쪽에서 원하는 대로 UI를 구성할 수 있습니다.

Step 5: HOC로 공통 기능 주입

여러 컴포넌트에 동일한 기능을 추가해야 할 때는 HOC 패턴을 사용합니다. 인증 체크, 로깅, 에러 바운더리 등이 대표적인 예입니다.

withAuth, withLoading과 같은 HOC를 만들어 기존 컴포넌트를 감싸면, 원본 컴포넌트를 수정하지 않고도 기능을 확장할 수 있습니다.

실제 코드 예제와 설명

예제 1: Custom Hook을 활용한 데이터 Fetching

// useUser.js - 커스텀 훅
import { useState, useEffect } from 'react';

function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }
    
    fetchUser();
  }, [userId]);

  return { user, loading, error };
}

export default useUser;

// UserProfile.js - Presentational Component
function UserProfile({ user }) {
  return (
    <div className="profile">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// UserProfileContainer.js - Container Component
function UserProfileContainer({ userId }) {
  const { user, loading, error } = useUser(userId);

  if (loading) return <div>로딩 중...</div>
  if (error) return <div>에러 발생: {error.message}</div>
  if (!user) return null;

  return <UserProfile user={user} />;
}

이 예제는 React 컴포넌트 설계 패턴 중 Container/Presentational 패턴과 Custom Hooks 패턴을 결합한 것입니다. useUser 훅은 데이터 fetching 로직을 캡슐화하고, Container는 상태 관리를, Presentational은 UI 렌더링만 담당합니다.

예제 2: Compound Component 패턴

// Tabs.js
import React, { createContext, useContext, useState } from 'react';

const TabsContext = createContext();

function Tabs({ children, defaultTab }) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Tabs.List = function TabsList({ children }) {
  return <div className="tabs-list">{children}</div>
};

Tabs.Tab = function Tab({ id, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button
      className={activeTab === id ? 'active' : ''}
      onClick={() => setActiveTab(id)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function TabPanel({ id, children }) {
  const { activeTab } = useContext(TabsContext);
  return activeTab === id ? <div>{children}</div> : null;
};

// 사용 예시
function App() {
  return (
    <Tabs defaultTab="profile">
      <Tabs.List>
        <Tabs.Tab id="profile">프로필</Tabs.Tab>
        <Tabs.Tab id="settings">설정</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="profile">프로필 내용</Tabs.Panel>
      <Tabs.Panel id="settings">설정 내용</Tabs.Panel>
    </Tabs>
  );
}

Compound Component 패턴은 여러 하위 컴포넌트가 하나의 단위로 동작하며, Context를 통해 상태를 공유합니다. 이 패턴은 API를 직관적으로 만들고 컴포넌트 간 결합도를 낮춥니다.

고급 활용 방법

1. 패턴 조합하기

실무에서는 여러 패턴을 조합하여 사용합니다. 예를 들어, Custom Hooks로 로직을 추출하고, Container/Presentational로 UI를 분리한 뒤, HOC로 인증을 추가할 수 있습니다.

2. TypeScript와 함께 사용

타입스크립트를 활용하면 컴포넌트 인터페이스를 명확하게 정의할 수 있습니다. Props 타입, 반환 타입을 명시하여 타입 안정성을 확보하세요.

3. 성능 최적화

React.memo로 불필요한 리렌더링을 방지하고, useMemo와 useCallback으로 값과 함수를 메모이제이션합니다. 특히 Presentational 컴포넌트는 React.memo로 감싸면 효과적입니다.

4. 테스트 작성

패턴별로 테스트 전략이 다릅니다. Custom Hooks는 @testing-library/react-hooks로 단위 테스트하고, Presentational 컴포넌트는 props 기반으로 스냅샷 테스트하며, Container는 통합 테스트를 작성합니다.

마무리 및 추가 학습 자료

React 컴포넌트 설계 패턴을 마스터하면 확장 가능하고 유지보수하기 쉬운 애플리케이션을 구축할 수 있습니다. 각 패턴의 장단점을 이해하고, 상황에 맞게 적절히 선택하는 것이 중요합니다.

추가 학습을 위해 React 공식 문서의 패턴 섹션, Kent C. Dodds의 블로그, 그리고 ‘Learning React’ 책을 추천합니다. 실제 오픈소스 프로젝트의 코드를 읽으며 패턴이 어떻게 적용되는지 학습하는 것도 좋은 방법입니다. 지속적인 실습을 통해 자신만의 설계 철학을 만들어가세요!