Blog

도입 – 학습 목표 및 필요성

React 컴포넌트 설계 패턴은 현대 웹 개발에서 필수적인 기술입니다. 효율적이고 유지보수가 쉬운 애플리케이션을 만들기 위해서는 올바른 컴포넌트 설계 패턴을 이해하고 적용해야 합니다. 이 튜토리얼에서는 Presentational/Container 패턴, Compound Components 패턴, Render Props 패턴, Custom Hooks 패턴 등 실무에서 가장 많이 사용되는 React 컴포넌트 설계 패턴을 단계별로 학습합니다. 초보 개발자도 쉽게 따라할 수 있도록 실제 코드 예제와 함께 각 패턴의 장단점, 사용 시나리오를 상세히 설명합니다.

기본 개념 설명

컴포넌트 설계 패턴은 React 애플리케이션의 구조를 체계적으로 조직하는 방법론입니다. 좋은 설계 패턴은 코드의 재사용성을 높이고, 관심사의 분리(Separation of Concerns)를 명확히 하며, 테스트 가능성을 향상시킵니다.

Presentational/Container 패턴은 UI 로직과 비즈니스 로직을 분리합니다. Presentational 컴포넌트는 props를 받아 UI만 렌더링하고, Container 컴포넌트는 상태 관리와 데이터 페칭을 담당합니다.

Compound Components 패턴은 여러 컴포넌트가 함께 작동하여 하나의 기능을 제공합니다. Select와 Option, Tab과 TabPanel처럼 서로 연관된 컴포넌트들이 암묵적으로 상태를 공유합니다.

Render Props 패턴은 컴포넌트 간에 코드를 공유하기 위해 함수를 prop으로 전달하는 기법입니다. Custom Hooks의 등장 이전에 많이 사용되었으며, 여전히 특정 상황에서 유용합니다.

단계별 구현 가이드

1단계: Presentational/Container 패턴 구현

먼저 사용자 목록을 표시하는 기능을 이 패턴으로 구현해봅시다.

Container 컴포넌트는 데이터 페칭과 상태 관리를 담당합니다. useEffect를 사용하여 API에서 데이터를 가져오고, useState로 상태를 관리합니다. 에러 처리와 로딩 상태도 이 컴포넌트에서 처리합니다.

Presentational 컴포넌트는 순수하게 UI만 담당합니다. props로 받은 데이터를 화면에 표시하는 역할만 하므로 테스트가 쉽고 재사용성이 높습니다.

2단계: Compound Components 패턴 구현

Tab 컴포넌트를 Compound Components 패턴으로 만들어봅시다. React Context API를 활용하여 부모-자식 컴포넌트 간에 상태를 공유합니다.

먼저 TabContext를 생성하고, 최상위 Tabs 컴포넌트에서 Provider로 감쌉니다. activeTab 상태와 setActiveTab 함수를 context를 통해 제공합니다.

TabList, Tab, TabPanels, TabPanel 등의 서브 컴포넌트들은 context를 통해 상태에 접근합니다. 이렇게 하면 사용자는 컴포넌트를 조합하여 유연하게 UI를 구성할 수 있습니다.

3단계: Custom Hooks 패턴 구현

로직을 재사용 가능한 Custom Hook으로 추출하는 방법을 알아봅시다. useForm이라는 Hook을 만들어 폼 상태 관리 로직을 캡슐화합니다.

Custom Hook은 useState, useEffect 등 React Hooks를 조합하여 특정 기능을 제공합니다. 여러 컴포넌트에서 동일한 로직을 사용해야 할 때 중복을 제거하고 코드를 간결하게 만들 수 있습니다.

Hook의 이름은 반드시 ‘use’로 시작해야 하며, React의 Hooks 규칙을 따라야 합니다. 최상위 레벨에서만 호출하고, React 함수 컴포넌트나 다른 Custom Hook 내에서만 사용합니다.

4단계: Higher-Order Component (HOC) 패턴

컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. 인증, 로깅, 에러 처리 등 횡단 관심사(Cross-cutting Concerns)를 처리할 때 유용합니다.

HOC는 원본 컴포넌트를 수정하지 않고 기능을 추가합니다. withAuth, withLoading 같은 HOC를 만들어 여러 컴포넌트에 동일한 기능을 적용할 수 있습니다.

실제 코드 예제와 설명

Presentational/Container 패턴 예제

// Container Component
import { useState, useEffect } from 'react';
import UserList from './UserList';

function UserListContainer() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return 
로딩 중...
;
  if (error) return 
에러: {error}
;

  return ;
}

// Presentational Component
function UserList({ users }) {
  return (
    

      {users.map(user => (
        

          {user.name} - {user.email}
        
      ))}
    
  );
}

export default UserListContainer;

Compound Components 패턴 예제

import { createContext, useContext, useState } from 'react';

const TabContext = createContext();

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

  return (
    
      
{children}
    
  );
}

function TabList({ children }) {
  return 
{children}
;
}

function Tab({ id, children }) {
  const { activeTab, setActiveTab } = useContext(TabContext);
  
  return (
     setActiveTab(id)}
    >
      {children}
    
  );
}

function TabPanels({ children }) {
  return 
{children}
;
}

function TabPanel({ id, children }) {
  const { activeTab } = useContext(TabContext);
  
  if (activeTab !== id) return null;
  
  return 
{children}
;
}

Tabs.TabList = TabList;
Tabs.Tab = Tab;
Tabs.TabPanels = TabPanels;
Tabs.TabPanel = TabPanel;

// 사용 예시
function App() {
  return (
    
      
        프로필
        설정
      
      
        
          프로필 내용
        
        
          설정 내용
        
      
    
  );
}

export default Tabs;

Custom Hooks 패턴 예제

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (callback) => (e) => {
    e.preventDefault();
    callback(values);
  };

  const reset = () => {
    setValues(initialValues);
    setErrors({});
  };

  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    reset
  };
}

// 사용 예시
function LoginForm() {
  const { values, handleChange, handleSubmit } = useForm({
    email: '',
    password: ''
  });

  const onSubmit = (formData) => {
    console.log('제출된 데이터:', formData);
  };

  return (
    

      
      
      로그인
    
  );
}

export default useForm;

고급 활용 방법

실무에서는 여러 패턴을 조합하여 사용합니다. Custom Hook과 Compound Components를 함께 사용하면 더욱 강력한 컴포넌트를 만들 수 있습니다.

성능 최적화: React.memo를 사용하여 Presentational 컴포넌트를 메모이제이션하고, useMemo와 useCallback으로 불필요한 리렌더링을 방지합니다.

타입 안정성: TypeScript를 도입하여 props의 타입을 명확히 정의하면 런타임 에러를 줄이고 개발 경험을 향상시킬 수 있습니다.

테스트: Presentational 컴포넌트는 순수 함수이므로 단위 테스트가 쉽습니다. React Testing Library를 사용하여 각 패턴별로 적절한 테스트 전략을 수립하세요.

상태 관리 라이브러리 통합: Redux, Zustand, Recoil 등의 상태 관리 라이브러리와 컴포넌트 설계 패턴을 함께 사용하면 대규모 애플리케이션도 효과적으로 관리할 수 있습니다.

마무리 및 추가 학습 자료

이 튜토리얼에서는 React 컴포넌트 설계 패턴의 핵심 개념과 실전 구현 방법을 학습했습니다. 각 패턴은 특정 상황에 적합하므로, 프로젝트의 요구사항에 따라 적절한 패턴을 선택하는 것이 중요합니다.

추가 학습을 위해 React 공식 문서의 ‘Patterns’ 섹션과 Kent C. Dodds의 ‘Advanced React Patterns’ 강의를 추천합니다. GitHub에서 유명 오픈소스 프로젝트의 코드를 분석하며 실전 패턴을 익히는 것도 좋은 방법입니다. 꾸준한 연습과 실제 프로젝트 적용을 통해 더욱 효율적인 React 개발자로 성장하시기 바랍니다.