리액트 애플리케이션을 개발할 때 컴포넌트 컨테이너 패턴은 stateful한 로직을 처리하는 컴포넌트와 UI를 담당하는 컴포넌트를 분리하여 코드를 구조화하는 방법 중 하나입니다. 이 패턴을 사용하면 애플리케이션의 유지보수성과 재사용성을 높일 수 있습니다.

컴포넌트 컨테이너 패턴이란?

컴포넌트 컨테이너 패턴은 컴포넌트를 상태(states)와 로직(logic)을 처리하는 컨테이너 컴포넌트와 UI를 렌더링하는 프레젠테이셔널 컴포넌트로 분리하는 구조를 말합니다. 이를 통해 컴포넌트 간의 역할을 명확히 구분할 수 있고, 각 컴포넌트를 독립적으로 테스트하고 재사용할 수 있습니다.

컴포넌트 컨테이너 패턴의 장점

컴포넌트 컨테이너 패턴을 사용하면 다음과 같은 장점을 얻을 수 있습니다:

• 코드의 재사용성 향상: 로직을 처리하는 컨테이너 컴포넌트는 여러 프레젠테이셔널 컴포넌트에서 재사용할 수 있습니다.
• 유지보수성 향상: 코드가 모듈화되어 각 컴포넌트의 역할이 명확하기 때문에 유지보수가 용이합니다.
• 테스트 용이성: 각 컴포넌트를 개별적으로 테스트할 수 있으므로 테스트 코드 작성이 쉬워집니다.

컴포넌트 컨테이너 패턴 구현 예시

다음은 컨테이너 컴포넌트와 프레젠테이셔널 컴포넌트를 분리하여 작성한 예시 코드입니다.

컨테이너 컴포넌트

import React, { useState, useEffect } from 'react';
import UserDataService from './services/UserDataService';
import UserList from './UserList';

const UserContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    UserDataService.getUsers()
      .then(response => setUsers(response.data))
      .catch(error => console.error(error));
  }, []);

  return <UserList users={users} />;
};

export default UserContainer;

프레젠테이셔널 컴포넌트

import React from 'react';

const UserList = ({ users }) => {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

위 코드에서 UserContainer는 사용자 데이터를 가져와 상태를 관리하는 역할을 하며, UserList는 사용자 목록을 렌더링하는 역할을 합니다.

이와 같이 컴포넌트 컨테이너 패턴을 사용하여 컴포넌트를 구성하면 각 컴포넌트들이 담당하는 역할이 명확해지고, 코드의 가독성과 유지보수성이 향상됩니다.

컴포넌트 컨테이너 패턴은 리액트 애플리케이션의 구조화에 도움을 주는 강력한 디자인 패턴 중 하나입니다.

참고 자료

• React Documentation: Composition vs Inheritance

이상으로 리액트에서 컴포넌트 컨테이너 패턴의 사용 방법에 대해 알아보았습니다.