리액트 컨테이너-프리젠터 패턴

Goyoung2·2022년 12월 17일
2

안녕하세요~👋 오늘은 디자인 패턴에 대해서 고민해보는 시간을 가져볼까해요.

개발에서 중요한 요소 중 하나가 설계, 곧 디자인을 잘 만드는건데요. 어떻게 개발을 할지 구조를 잡고 시작해야 개발 컨벤션을 맞추기 좋고, 개발 속도와 효율성이 높아지는 효과를 얻을 수 있어요. 또 프로젝트가 커지면 커질 수록 디자인 패턴이 아주 중요해진답니다.


컨테이너-프리젠터 패턴

오늘 소개해드릴 패턴은 컨테이너-프리젠터 패턴이에요. 이 패턴은 제가 최근에 자주 사용하는 패턴인데요. 여러가지 장점이 있어요. 아래에서 소개해볼게요.


용어 소개

컨테이너는 뭔가를 담는 용기를 뜻해요. 컨테이너는 리액트의 다양한 state를 담고 state를 프리젠터에 props로 넘겨주는 역할을 해요. 또 fetch를 통해 데이터를 가져오고 이를 관리하는 역할을 하고 있어요.

프리젠터(VAC: visual asset component)는 화면에 나타나는 렌더링 컴포넌트를 말해요. 프리젠터는 state를 포함하지 않고, 모든 요소를 props로 받아서 렌더링을 해요. 조건부 렌더링, 반복문을 활용한 렌더링, 스타일링이 포함된 UI 컴포넌트에요.


왜 이 둘을 구분해서 작성해야 할까요?

이유를 찾는 쉬운 방법은 반대로 생각해보는 거에요! 이 둘을 구분 없이 모두 component 폴더에 작성한다고 생각해볼게요.

예를 들어볼게요. 개발 중에 알 수 없는 오류가 발생했어요. Page 컴포넌트를 열고 오류가 날만한 state를 찾았어요. state를 따라가보니 A 컴포넌트에 props로 넘겨주고 있네요. A 컴포넌트에 들어가보죠. A 컴포넌트에서 props와 state를 모두 사용 중이네요. 이 둘을 조합해서 B컴포넌트로 넘겨주고 있네요. B컴포넌트를 열어볼게요. 자 B컴포넌트에서도 props와 state를 모두 사용하고 있네요. 이번엔 C컴포넌트로 state를 넘겨주고 있어요. C컴포넌트를 열어보니 C컴포넌트의 state에 여러 조건이 걸려있고 이를 활용해서 D, E, F컴포넌트를 렌더링하고 있네요... 도대체 어디서 문제가 발생한거죠??

위와 같은 복잡한 상황이 자주 발생할까요? 답변은 '매우 매우 그렇다'입니다. 위 상황이 복잡해진 이유는 뭘까요? 여러 컴포넌트들에서 각자의 state들을 사용하고 있고, 이 중에 어떤 state에서 문제가 발생한건지 추적이 어렵다는게 문제의 원인이에요.

  • 컨테이너에서만 state를 관리하게 되면 오류를 찾기가 아주 수월해져요. 복잡해 보이는 코드일지라도 이 컨테이너 안에 분명히 오류를 발생시키는 state가 있기 때문이죠. 이녀석을 찾아서 수정해주면 하위 컴포넌트들은 프리젠터이기 때문에 곧바로 문제가 해결돼요. 그럼 컨테이너의 state 코드가 너무 길고 복잡해지면 어떻게 해야될까요? 간단해요. 새로운 컨테이너를 만들고 복잡한 state와 로직을 새로 만든 컨테이너에 나누어주면 돼요.

  • 프리젠터는 순수한 렌더링 컴포넌트이기 때문에 side effect(부작용: 예상치 못한 오류)를 발생시키지 않아요. fetch와 state는 side effect를 일으키는 주된 원인이에요. side effect를 줄이는게 개발을 잘하는 핵심 요소임을 잊지 마세요.

  • 프리젠터는 아토믹 디자인, storybook 등에 활용될 수 있어요. 아토믹 디자인은 프리젠터의 역할을 구분하여 재사용성을 극대화하는 멋진 디자인 패턴이에요. storybook은 프리젠터를 화면으로 보여주고 다양한 UI/UX 테스트를 도와주는 멋진 UI 라이브러리에요.


컨테이너

  • stateful 컴포넌트
  • 데이터 fetch 컴포넌트
  • state를 프리젠터에 props로 넘겨줌
  • useCallback, useMemo 사용하여 성능 최적화

프리젠터

  • stateless 컴포넌트
  • props를 통해서만 렌더링
  • 순수한 UI 렌더링 컴포넌트
  • 스타일링, 조건부 렌더링, 반복문 렌더링
  • React.memo() 사용하여 성능 최적화
  • props 변경이 잦다면 프리젠터를 더 작게 나누어 성능 최적화

긴글 읽어주셔서 감사해요~~ 그럼 이만~ 🤞

참고

profile
프론트엔드 엔지니어로 일하고 있어요. 제품, 동료, 성장을 중요시해요. 겸손, 존중, 신뢰로 좋은 동료들과 함께 좋은 제품을 만들어 나가요. 😄

1개의 댓글

comment-user-thumbnail
2022년 12월 17일

다음으로는 아토믹 디자인, 컨테이너 종류, 프리젠터 종류 관련 글 포스팅하면 좋을듯 해요~

답글 달기