리액트 생태계에서는 다양한 컴포넌트 구조가 존재하지만

최근 공부하면서 리덕스 사용에 유용한 Dumb 컴포넌트 구조에 대해서 정리해보겠다.

Dumb 컴포넌트 구조는 리덕스 창시자인 Dan Abramov가 고안한 컴포넌트 구조이다.

이 구조론에서는 Presentational Component와 Container Component가 존재한다.

Presentational Component

특징

• components 폴더에 보관
• View를 담당
• 하나의 Presentational Component는 내부에 Presentational Component와 Container Component를 가질 수 있음
• props.children을 통해 다른 컴포넌트를 포함 가능
• 애플리케이션의 스토어에 의존성을 갖지 않음
• 데이터 및 데이터와 관련된 함수는 props를 통해서 받음
• UI 상태 관리를 위한 state를 갖는 경우가 있음

Container Component

특징

• containers 폴더에 보관
• 컴포넌트의 기능을 담당
• Presentational Component와 Container 컴포넌트를 가질 수 있지만, 대체로 자체적인 DOM 마크업이나 스타일을 갖지 않음
• 액션을 호출하는 작업이 이루어지고 Presentational Component에 props로 넘겨줌
• 주로 Store에 state를 갖는 경우가 많음

USAGE

카운터 예제를 통해서 간단한 사용법을 살펴보겠다.

Presentational Component

// src/componets/Counter.js
import React from 'react'

export default function Counter({number, onIncrease, onDecrease}) {
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

Container Component

// src/containers/CouterContainer.js
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Counter from '../components/Counter'
import { decreaseAsync, increaseAsync } from '../redux/modules/counter';

export default function CounterContainer() {
  const number = useSelector(state => state.counter);
  const dispatch = useDispatch();

  const onIncrease = () => {
    dispatch(increaseAsync());
  }
  const onDecrease = () => {
    dispatch(decreaseAsync());
  }
  return (
    <Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />
  )
}

//src/App.js
import React from 'react'
import CounterContainer from "./containers/CounterContainer";

function App() {
  return (
    <>
      <CounterContainer />
    </>
  );
}

export default App;

이렇게 App => Container Component => Presentational Component로 관계가 성립된다.

기능적인 부분은 Container에 몰아주고 props로 내려줘서 Presentational Component에서 사용하도록 하는 단순한 구조이다.

지금까지 단순하지만 영향력은 막강한 Dumb Component 구조론에 대해서 살펴보았다.