[React] 디자인 패턴 : Container - Presenter 패턴

프로젝트를 시작하고 조금씩 코드가 복잡해져 나가고 다른 사람들의 코드와 Merge 했을 때 중구난방이 되어있는 형태를 보았다. 서로 규칙이 없었고 스스로 코드를 작성할 때 특정 규칙이 아닌 마음대로 작성하게 되면서 가독성, 재사용성 등이 현저히 떨어지는 코드가 되었다.

이를 해결하기위해 다른 사람들의 코드를 보던 중 리액트의 디자인 패턴을 알게 되었고, 가장 기본적인 패턴인 Container-Presenter 패턴을 공부해보고 이를 적용시켜보려고 한다.

---

Container - Presenter 패턴의 개념

먼저 Container - Presenter 패턴에 대해 간략하게 알아보자. 이름에서 볼 수 있듯이 두 개의 구조로 분리한다는 것을 알 수 있다. 각각의 역할은 다음과 같다.

Container : 데이터를 처리하는 역할을 하며 API로 데이터를 불러오거나 Redux를 사용하여 dispatch를 사용하여 상태를 처리한다.

Presenter : Container에서 처리한 상태를 props로 전달받아 상태를 화면에 출력하는 컴포넌트이다. 

즉, 데이터 처리와 데이터 출력을 분리하여 코드를 작성하는 것이다. 

 

Container - Presenter 패턴 적용하기

해당 패턴을 적용하기 전과 적용 후를 비교하여 더욱 이해할 필요가 있다. 따라서 간단한 카운팅 앱을 구현하여 디자인 패턴 적용 전과 적용 후를 비교해보자.

 

다음은 디자인 패턴을 적용하기 전 코드이다.

버튼을 클릭했을 때 count가 증가하여 <span>에 출력되도록 하였다. 디자인 패턴을 적용하기 전에는 Home 컴포넌트에서 데이터를 처리(count 정의, button 클릭 시 count 증가)하고 처리된 데이터를 출력하는 부분이 함께 존재한다.

간단한 카운팅앱이기 때문에 구조가 복잡해 보이지 않지만 프로젝트의 규모가 커질수록 하나의 컴포넌트에 많은 코드가 추가될 것이다.

import { useState } from 'react';

function Home() {
    const [count, setCount] = useState(0);

    function onClick() {
        setCount(count+1);
    }

    return(
        <div className="home">
            <span>{count}</span>
            <button onClick={onClick}>+</button>
        </div>
    )
}
export default Home;

 

다음은 디자인 패턴을 적용한 코드이다. Home 컴포넌트에서는 버튼을 클릭했을 때 숫자가 증가하도록 데이터만 처리하며 처리된 데이터는 Span 컴포넌트에 전달하여 출력하도록 한다. Container가 되는 Home에서 처리된 데이터를 props로 전달하여 Presenter에 해당하는 Span에서 데이터를 출력하는 구조이다.

import { useState } from 'react';
import Button from '../../components/Button';
import Span from '../../components/Button/Span';
function Home() {
    const [count, setCount] = useState(0);

    function onClick() {
        setCount(count+1);
    }
    
    return(
        <>
            <Span count={count}/>
            <Button onClick={onClick}></Button>
        </>
    )
}
export default Home;

import styled from 'styled-components';

const StyledSpan = styled.span`
    font-size: 50px;
    padding: 2rem;
    display: block;
`

const Span = ({count}) => {
    return(
        <>
            <StyledSpan>{count}</StyledSpan>
        </>
    )
}

export default Span

---

디자인 패턴을 적용했을 때 느낀 장점

1. 코드의 가독성을 높여준다.

이번 기회에 디자인 패턴을 적용하지 않은 이전의 프로젝트들을 살펴봤다. 당시에도 구조가 지저분하다는 느낌을 받았는데 디자인 패턴을 알고 다시 보니 더욱더 보기 어렵게 다가왔다.

 

2. 재사용성을 높일 수 있다.

데이터를 출력하는 부분인 Presenter를 만들어 놓는다면 다른 상태 값을 갖는 Container에도 적용시킬 수 있어 재사용성을 높이게되고 이를 통해 개발 효율을 높일 수 있다.

 

현재는 간단하게 적용해보면서 위와 같은 장점을 느낄 수 있었다. 이후 프로젝트에 해당 디자인 패턴을 적용시켜서 장점을 찾아보고, 단점을 찾아서 다른 디자인 패턴과 비교를 해봐야겠다.