Blog

도입 – 학습 목표 및 필요성

React 컴포넌트 설계 패턴은 현대 웹 개발에서 필수적인 스킬입니다. 효율적이고 재사용 가능한 컴포넌트를 만들기 위해서는 검증된 설계 패턴을 이해하고 적용하는 것이 중요합니다. 이 튜토리얼에서는 Presentational/Container 패턴, Compound Components 패턴, Higher-Order Components, Render Props, Custom Hooks 등 실무에서 가장 많이 사용되는 패턴들을 단계별로 학습합니다. 각 패턴의 장단점을 이해하고, 실제 프로젝트에 바로 적용할 수 있는 실전 지식을 습득하게 됩니다. 이를 통해 유지보수가 쉽고 확장 가능한 React 애플리케이션을 구축하는 능력을 키울 수 있습니다.

기본 개념 설명

컴포넌트 설계 패턴은 반복적으로 발생하는 문제에 대한 검증된 해결책입니다. React에서는 크게 다섯 가지 주요 패턴이 존재합니다.

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

Compound Components 패턴은 여러 컴포넌트가 협력하여 하나의 기능을 제공합니다. select와 option 태그처럼 부모-자식 관계에서 암묵적으로 상태를 공유합니다.

Higher-Order Components (HOC)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. 공통 로직을 재사용할 때 유용합니다.

Render Props는 함수를 props로 전달하여 렌더링 로직을 공유하는 패턴입니다.

Custom Hooks는 React 16.8 이후 가장 권장되는 패턴으로, 상태 로직을 재사용 가능한 함수로 추출합니다.

단계별 구현 가이드

1단계: Presentational/Container 패턴 구현

먼저 사용자 목록을 표시하는 기능을 두 컴포넌트로 분리해봅시다. Container 컴포넌트에서 데이터를 가져오고, Presentational 컴포넌트에서 렌더링합니다.

Container는 useEffect로 API를 호출하고 useState로 상태를 관리합니다. 가져온 데이터를 props로 Presentational 컴포넌트에 전달합니다. Presentational 컴포넌트는 순수하게 props만 받아서 UI를 그리므로 테스트가 쉽고 재사용성이 높습니다.

2단계: Compound Components 패턴 활용

탭 컴포넌트를 예로 들어보겠습니다. Tab.Group, Tab.List, Tab.Panels 같은 서브 컴포넌트들이 Context API를 통해 상태를 공유합니다. 부모 컴포넌트에서 Context Provider를 설정하고, 자식 컴포넌트들은 useContext로 상태에 접근합니다.

이 패턴의 장점은 API가 직관적이고 선언적이라는 것입니다. 사용자는 각 서브 컴포넌트의 순서와 구조를 자유롭게 조정할 수 있습니다.

3단계: Custom Hooks로 로직 재사용

폼 입력, 데이터 fetching, 로컬 스토리지 동기화 등 반복되는 로직을 Custom Hook으로 추출합니다. 예를 들어 useForm 훅은 입력값 상태, 유효성 검사, 제출 핸들러를 캡슐화합니다.

useLocalStorage 훅은 상태를 자동으로 로컬 스토리지와 동기화합니다. useFetch 훅은 로딩 상태, 에러 처리, 데이터 관리를 한 번에 처리합니다.

Custom Hooks는 컴포넌트 로직을 함수로 추출하여 여러 컴포넌트에서 재사용할 수 있게 합니다. HOC나 Render Props보다 간단하고 조합하기 쉬워 현재 가장 권장되는 방식입니다.

4단계: HOC로 공통 기능 추가

인증 확인, 로딩 표시, 에러 경계 등 여러 컴포넌트에 공통으로 적용해야 하는 기능은 HOC로 구현합니다. withAuth HOC는 컴포넌트를 감싸서 인증 여부를 확인하고, 미인증 시 로그인 페이지로 리다이렉트합니다.

withLoading HOC는 로딩 상태일 때 스피너를 표시하고, 완료되면 실제 컴포넌트를 렌더링합니다.

실제 코드 예제와 설명

Presentational/Container 패턴 예제

// Container Component
function UserListContainer() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

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

  if (loading) return 
로딩 중...
;
  return ;
}

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

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

Custom Hook 예제

// useForm Custom Hook
function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

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

  const resetForm = () => setValues(initialValues);

  return { values, handleChange, resetForm };
}

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
    resetForm();
  };

  return (
    

      
      
      로그인
    
  );
}

Compound Components 패턴 예제

// Context 생성
const TabContext = createContext();

function Tabs({ children }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    
      
{children}
    
  );
}

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

function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabContext);
  const isActive = activeIndex === index;

  return (
     setActiveIndex(index)}
    >
      {children}
    
  );
}

function TabPanels({ children }) {
  const { activeIndex } = useContext(TabContext);
  return 
{children[activeIndex]}
;
}

// 사용 예제

  
    탭 1
    탭 2
  
  
    
첫 번째 패널
    
두 번째 패널
  

고급 활용 방법

React 컴포넌트 설계 패턴을 마스터한 후에는 이를 조합하여 더 강력한 아키텍처를 구축할 수 있습니다. 예를 들어 Custom Hooks와 Compound Components를 함께 사용하면 복잡한 UI 로직을 우아하게 관리할 수 있습니다.

성능 최적화를 위해서는 React.memo, useMemo, useCallback을 패턴과 함께 활용하세요. Presentational 컴포넌트를 memo로 감싸면 불필요한 리렌더링을 방지할 수 있습니다.

TypeScript를 사용한다면 제네릭을 활용하여 타입 안전한 HOC와 Custom Hook을 만들 수 있습니다. 이는 대규모 프로젝트에서 특히 유용합니다.

상태 관리 라이브러리(Zustand, Jotai, Recoil)와 패턴을 결합하면 전역 상태를 효율적으로 관리하면서도 컴포넌트의 재사용성을 유지할 수 있습니다.

마무리 및 추가 학습 자료

이 튜토리얼에서는 React 컴포넌트 설계 패턴의 핵심 개념과 실전 구현 방법을 배웠습니다. 각 패턴은 특정 상황에 맞게 선택하여 사용해야 합니다. 현재는 Custom Hooks가 가장 권장되지만, 레거시 코드에서는 HOC나 Render Props를 만날 수 있으므로 모든 패턴을 이해하는 것이 중요합니다.

추가 학습을 위해서는 React 공식 문서의 Advanced Guides 섹션, Kent C. Dodds의 블로그, Patterns.dev 웹사이트를 참고하세요. 실제 오픈소스 라이브러리(React Router, Headless UI)의 소스 코드를 분석하면 패턴이 실무에서 어떻게 활용되는지 배울 수 있습니다. 꾸준한 연습과 실제 프로젝트 적용을 통해 패턴 선택 능력을 키워나가세요.