React 디자인 패턴

🎨 디자인 패턴

리액트 프로젝트가 커질수록 유지보수, 확장성이 중요해집니다. 이를 위해 다양한 디자인 패턴을 적용할 수 있으며, 이번 글에서는 Container-Presenter 패턴을 중심으로 자주 쓰이는 React 패턴들을 소개합니다.

🧱 1. Container-Presenter 패턴

UI와 로직을 분리하는 패턴으로, 다음과 같은 구조를 가집니다.

• Container: 상태 관리, 비즈니스 로직 담당 (데이터 처리)
• Presenter: 순수 UI 컴포넌트 (props로만 동작)

📘 예제

// CounterContainer.js import React, { useState } from 'react'; import Counter from './Counter'; function CounterContainer() { const [count, setCount] = useState(0); return ( <Counter count={count} onIncrease={() => setCount(count + 1)} onDecrease={() => setCount(count - 1)} /> ); } export default CounterContainer; // Counter.js function Counter({ count, onIncrease, onDecrease }) { return ( <div> <h1>{count}</h1> <button onClick={onIncrease}>+</button> <button onClick={onDecrease}>-</button> </div> ); } export default Counter;

장점: 테스트가 쉬워지고, UI와 로직을 독립적으로 관리할 수 있습니다.

📦 2. Presentational and Container Pattern

React 공식 문서에서도 추천했던 패턴으로, 위와 유사하게 재사용성과 분리에 초점을 둡니다.

🔁 3. HOC (Higher-Order Components)

컴포넌트를 인자로 받아 새로운 기능이 추가된 컴포넌트를 반환합니다.

const withLogger = (Component) => { return (props) => { console.log('렌더링 중:', props); return <Component {...props} />; }; };

📚 4. Render Props 패턴

함수를 props로 전달하여 컴포넌트 내부에서 호출하는 방식입니다.

function DataFetcher({ render }) { const data = fetchSomeData(); return render(data); }

🧩 5. Compound Components 패턴

부모 컴포넌트가 상태를 공유하고, 자식 컴포넌트들이 이를 이용해 UI를 구성합니다. 대표적인 예: <Tabs><Tab></Tab></Tabs>

✅ 마무리

• Container-Presenter는 가장 많이 쓰이는 패턴으로, UI/로직 분리에 탁월합니다.
• HOC, Render Props는 재사용성을 높이는 고급 패턴입니다.
• Compound와 Context는 확장성과 모듈화에 효과적입니다.