Blog

도입 – 학습 목표 및 필요성

React 컴포넌트 설계 패턴은 현대 웹 개발에서 필수적인 기술입니다. 재사용 가능하고 유지보수가 쉬운 컴포넌트를 만들기 위해서는 올바른 설계 패턴을 이해하고 적용하는 것이 중요합니다. 이 튜토리얼에서는 실무에서 가장 많이 사용되는 컴포넌트 설계 패턴들을 단계별로 학습하고, 실제 코드 예제를 통해 직접 구현해볼 수 있습니다. Container/Presenter 패턴, Compound Component 패턴, Render Props 패턴, Custom Hooks 패턴 등 핵심 패턴들을 마스터하여 더 나은 React 개발자로 성장할 수 있습니다.

기본 개념 설명

React 컴포넌트 설계 패턴은 컴포넌트의 구조와 역할을 명확히 분리하여 코드의 품질을 높이는 방법론입니다. 좋은 설계 패턴은 다음과 같은 특징을 가집니다: 단일 책임 원칙(Single Responsibility) – 각 컴포넌트는 하나의 명확한 역할만 수행합니다. 재사용성(Reusability) – 여러 곳에서 쉽게 재사용할 수 있습니다. 테스트 용이성(Testability) – 독립적으로 테스트하기 쉽습니다. 확장성(Scalability) – 새로운 기능을 추가하기 쉽습니다. 이러한 원칙들을 따르면 대규모 애플리케이션에서도 코드를 효율적으로 관리할 수 있습니다. 각 패턴은 특정 상황에서 최적의 해결책을 제공하므로, 상황에 맞는 패턴을 선택하는 것이 중요합니다.

단계별 구현 가이드

1단계: Container/Presenter 패턴

이 패턴은 비즈니스 로직과 UI를 분리하는 가장 기본적인 패턴입니다. Container 컴포넌트는 데이터 관리와 로직을 담당하고, Presenter 컴포넌트는 순수하게 UI 렌더링만 담당합니다. 먼저 Presenter 컴포넌트를 만들어 props로 받은 데이터를 화면에 표시합니다. 이 컴포넌트는 상태를 가지지 않으며, 받은 데이터를 그대로 렌더링하는 역할만 수행합니다. 다음으로 Container 컴포넌트를 만들어 API 호출, 상태 관리, 이벤트 핸들링 등의 로직을 처리하고, 그 결과를 Presenter 컴포넌트에 props로 전달합니다.

2단계: Compound Component 패턴

이 패턴은 여러 컴포넌트가 협력하여 하나의 기능을 구현할 때 사용합니다. Context API를 활용하여 부모 컴포넌트와 자식 컴포넌트들이 상태를 공유합니다. 예를 들어, Tab 컴포넌트를 만들 때 TabList, Tab, TabPanel을 각각 독립적인 컴포넌트로 만들되, 내부적으로는 Context를 통해 현재 활성화된 탭 정보를 공유합니다. 이렇게 하면 사용자는 컴포넌트를 조합하여 유연하게 UI를 구성할 수 있습니다.

3단계: Custom Hooks 패턴

반복되는 로직을 Custom Hook으로 추출하여 재사용성을 높입니다. 예를 들어, 데이터 페칭 로직, 폼 관리 로직, 로컬 스토리지 동기화 로직 등을 Hook으로 만들면 여러 컴포넌트에서 쉽게 재사용할 수 있습니다. Custom Hook은 ‘use’로 시작하는 이름을 가지며, 내부에서 다른 Hook들을 사용할 수 있습니다. 로직을 Hook으로 분리하면 컴포넌트는 더 간결해지고, 테스트도 쉬워집니다.

4단계: Render Props 패턴

컴포넌트의 렌더링 로직을 외부에서 주입받는 패턴입니다. 함수를 props로 받아서 해당 함수가 반환하는 JSX를 렌더링합니다. 이 패턴은 로직은 재사용하되, UI는 다르게 표현하고 싶을 때 유용합니다. 예를 들어, 마우스 위치를 추적하는 로직은 같지만, 그 정보를 표시하는 방법은 각 사용처마다 다를 수 있습니다. 이럴 때 Render Props 패턴을 사용하면 유연하게 대응할 수 있습니다.

실제 코드 예제와 설명

Container/Presenter 패턴 예제

// Presenter Component
const UserList = ({ users, loading, error }) => {
  if (loading) return 
로딩 중...
;
  if (error) return 
에러: {error}
;
  
  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
};

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

  return ;
};

Custom Hooks 패턴 예제

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
};

// 사용 예시
const ProductList = () => {
  const { data: products, loading, error } = useFetch('/api/products');
  
  if (loading) return 
로딩 중...
;
  if (error) return 
에러 발생
;
  
  return (
    

      {products.map(product => (
        
{product.name}
      ))}
    
  );
};

고급 활용 방법

패턴 조합하기

실제 프로젝트에서는 여러 패턴을 조합하여 사용합니다. 예를 들어, Custom Hook으로 데이터 페칭 로직을 추출하고, Container/Presenter 패턴으로 UI와 로직을 분리하며, Compound Component 패턴으로 복잡한 UI를 구성할 수 있습니다. Higher-Order Component(HOC) 패턴을 사용하여 공통 기능을 여러 컴포넌트에 주입할 수도 있습니다. 상황에 맞게 적절한 패턴을 선택하고 조합하는 것이 중요합니다.

성능 최적화

React.memo, useMemo, useCallback을 활용하여 불필요한 리렌더링을 방지합니다. Container 컴포넌트에서 콜백 함수를 정의할 때는 useCallback으로 감싸고, 복잡한 계산은 useMemo를 사용합니다. Presenter 컴포넌트는 React.memo로 감싸서 props가 변경되지 않으면 리렌더링하지 않도록 합니다.

마무리 및 추가 학습 자료

React 컴포넌트 설계 패턴을 마스터하면 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 이 튜토리얼에서 다룬 패턴들을 실제 프로젝트에 적용해보며 경험을 쌓는 것이 중요합니다. 추가 학습을 위해 React 공식 문서의 Advanced Guides 섹션, Kent C. Dodds의 블로그, Patterns.dev 웹사이트를 추천합니다. 꾸준히 연습하고 다양한 패턴을 시도해보면서 자신만의 설계 철학을 만들어가세요. 성공적인 React 개발 여정을 응원합니다!