리액트 패턴 - Container/Presentational 패턴을 알아보자

어떤 코드를 짜면서 패턴이 있다면 그 패턴을 무조건 누군가가 개발한 패턴이라고 한다.

그렇다면 해당 패턴을 모르고 사용하는 것은 앞뒤가 맞지 않는다고 생각됐다.

그래서 리액트에서 사용되는 디자인 패턴 중 하나인 Container and Presentational Components Pattern을 알아보려고 한다.

 

현재 구글 검색을 하면 손쉽게 해당 패턴에 대해 알 수 있다.

그래서 나는 해당 패턴에 대해 이해하고, 알아가는 과정을 포스팅하려한다.

 

📖Container and Presentational Components Pattern이란?

간단하게 말해 비즈니스 로직으로 부터 뷰를 분리하여 관심사의 분리(SoC)를 강제하는 것이다.

 

먼저 아래 코드를 보자

해당 코드를 보고 어떤 생각이 드나요?

해당 코드는 TanstackQuery를 사용하면서 나도 정말 많이 쓴 코드다.

코드가 잘 실행되는지 확인한답시고, 일단 위처럼 코드를 작성하고, 바꾸지 않았다.

 

이 코드는 비즈니스 로직과 UI가 강하게 결합되어있고,
하나의 컴포넌트에서 데이터를 받아오고, 보여주는 일을 수행하고 있다.

 

🛠️그럼 이 코드를 Container and Presentational Components Pattern으로 고쳐보자

Container 컴포넌트는 어떤 데이터가 보여질 지에 대해 다루는 컴포넌트이고,

Presentational 컴포넌트는 데이터가 어떻게 보여질 지에 대해서만 다루는 컴포넌트이다.

(좌) Container 컴포넌트와 (우) Presentational 컴포넌트

 

✨Hook의 등장

대개 Container/Presentational 패턴은 React Hooks로 대체 가능하다.

React 에 Hooks가 추가되면서 Container 컴포넌트 없이도 stateless 컴포넌트를 쉽게 만들 수 있게 되었다.

 

그럼 DataListContainer에 있는 데이터 로드 코드를 아래와 같이 커스텀 훅으로 교체하면 된다.

(좌) 커스텀 훅으로 교체된 Container, (우) 커스텀 훅을 사용하는 Presentational

 

 

 

해당 패턴을 정리하자면 아래와 같다.

• 비즈니스 로직(컨테이너)과 UI(프레젠테이션)의 관심사를 효과적으로 분리할 수 있습니다.
• 다른 컨테이너와 프레젠테이션 컴포넌트를 조합할 수 있습니다.
• 비즈니스의 로직 수정 없이 UI를 변경할 수 있습니다.
• 기본적으로 “성능 또는 기술의 분리”가 아니라 “목적의 분리”입니다.
• Presentational 컴포넌트는 테스트하기도 쉽다. 일반적으로 순수함수로 구현되므로 전체 목 데이터 스토어를 만들 필요 없이 요구하는 데이터만 인자로 넘겨주면 된다.
• 단, 훅(Hook)의 등장으로 Container and Presentational Components Pattern 패턴은 더 이상 권장되지 않습니다.
• 훅을 사용하더라도 이 패턴을 사용할 수는 있지만 너무 작은 규모의 앱에서는 오버엔지니어링 일 수 있다.

🤔왜 Container and Presentational Components Pattern을 권장하지 않을까?

리액트 개발자 댄 아브라모브의 글에서 아래와 같이 얘기하고 있다.

2019년 업데이트:
이 글을 오래 전에 썼고 그 이후 제 생각도 달라졌습니다.
특히 저는 더 이상 이런 식으로 컴포넌트를 분할하지 않는 것이 좋습니다.
코드베이스에서 자연스럽다면 이 패턴이 유용할 수 있습니다.
하지만 저는 이 패턴이 필요성 없이 거의 독단에 가까운 열정으로 시행되는 것을 너무 많이 보았습니다.
제가 이 패턴이 유용하다고 생각한 주된 이유는 복잡한 상태 저장 로직을 컴포넌트의 다른 측면과 분리할 수 있기 때문입니다. 
훅을 사용하면 임의의 구분 없이도 동일한 작업을 수행할 수 있습니다. 
이 텍스트는 역사적인 이유로 그대로 남겨두었지만 너무 심각하게 받아들이지 마세요.

 

📘마무리하며...

Container and Presentational Components Pattern에 대해서 간단하게 정리해봤다.

훅을 통한 관심사를 분리한 패턴은 나도 주로 사용했던 패턴이다. 

근데 이 패턴이 Container and Presentational Components Pattern에서 보완된 패턴이라는 것을 처음 알게 되었다.

그리고 중요한 것은  Container and Presentational Components Pattern은 이제 권장하지 않는다는 것이다.

 

그리고 사실 다양한 패턴들을 하나의 글에 올릴려고 했는데 나눠서 포스팅을 하는 것이 글을 읽기 좋다고 판단해 나누어서 포스팅하려고한다.