React 애플리케이션을 개발할 때, 코드의 유지보수성과 재사용성을 높이기 위해 다양한 디자인 패턴을 활용합니다. 그 중에서도 Presentational & Container 패턴은 컴포넌트를 역할에 따라 분리하는 데 효과적입니다. 이 글에서는 Presentational & Container 패턴에 대해 자세히 살펴보겠습니다.
Presentational 컴포넌트
정의
Presentational 컴포넌트는 주로 UI를 담당하는 컴포넌트입니다. 이들은 데이터나 상태 관리보다는 어떻게 화면에 보여줄지에 초점을 맞추며, 사용자와의 상호작용을 처리합니다.
특징
- UI 중심: 스타일링과 레이아웃을 관리하며, 외부에서 전달된 데이터를 시각적으로 표현하는 데 중점을 둡니다.
- 상태 없음: 대부분 상태가 없거나, 있어도 매우 제한적입니다. 상태 관리가 필요한 경우는 Container 컴포넌트에 맡깁니다.
- Props 사용: 필요한 데이터는 모두 props를 통해 전달받습니다.
- 재사용성: 독립적인 UI 컴포넌트로, 다양한 곳에서 재사용될 수 있습니다.
예제
const Button = ({ onClick, label }) => (
<button onClick={onClick}>
{label}
</button>
);Container 컴포넌트
정의
Container 컴포넌트는 애플리케이션의 상태와 로직을 관리하는 컴포넌트입니다. 데이터 페칭, 상태 관리, 비즈니스 로직 등을 처리하고, 이를 Presentational 컴포넌트에 전달합니다.
특징
- 상태 관리: 애플리케이션의 상태를 관리하고, 필요에 따라 상태를 업데이트합니다.
- 데이터 처리: API 호출이나 데이터 변환 등 비즈니스 로직을 담당합니다.
- Presentational 컴포넌트와 분리: UI는 Presentational 컴포넌트에 맡기고, 데이터와 로직에 집중합니다.
예제
import { useState, useEffect } from 'react';
import Button from './Button';
const ButtonContainer = () => {
const [label, setLabel] = useState('Click me');
useEffect(() => {
// 데이터 페칭이나 상태 업데이트 로직
}, []);
const handleClick = () => {
setLabel('Clicked!');
};
return <Button onClick={handleClick} label={label} />;
};장점
1. 역할 분리
컴포넌트를 역할에 따라 분리함으로써 코드의 가독성과 유지보수성을 높일 수 있습니다. Presentational 컴포넌트는 UI와 관련된 부분만 집중하고, Container 컴포넌트는 로직과 데이터를 관리합니다.
2. 재사용성
Presentational 컴포넌트는 독립적인 UI 컴포넌트로 설계되어 다양한 곳에서 재사용할 수 있습니다. 이는 코드의 중복을 줄이고, 개발 속도를 높이는 데 기여합니다.
3. 테스트 용이성
UI와 로직이 분리되므로, 각각의 컴포넌트를 독립적으로 테스트할 수 있습니다. Presentational 컴포넌트는 단순히 렌더링 결과를 테스트하면 되고, Container 컴포넌트는 로직과 상태 관리를 집중적으로 테스트할 수 있습니다.
단점
1. 초기 설계의 복잡성
초기 설계 단계에서 컴포넌트를 역할에 따라 분리하는 것이 다소 복잡할 수 있습니다. 특히, 애플리케이션의 구조가 복잡해질수록 더 많은 고민이 필요합니다.
2. 컴포넌트 수 증가
컴포넌트를 역할에 따라 세분화하다 보면, 컴포넌트의 수가 증가할 수 있습니다. 이는 파일 관리와 네이밍에 신경 써야 함을 의미합니다.
결론
Presentational & Container 디자인 패턴은 React 애플리케이션의 유지보수성과 재사용성을 높이는 데 매우 유용한 패턴입니다. UI와 로직을 명확히 분리함으로써 코드의 가독성을 높이고, 테스트와 협업을 용이하게 만듭니다. 물론, 초기 설계 단계에서의 복잡성과 컴포넌트 수 증가 등의 단점도 있지만, 장점이 훨씬 크기 때문에 많은 개발자들이 이 패턴을 선호합니다. 프로젝트의 특성과 요구사항에 맞게 이 패턴을 적절히 적용하여 더 나은 코드 품질을 유지할 수 있기를 바랍니다.
