React | 컴포넌트의 역할에 따른 구분

0. 이런 구조로 만드는 것이 옳을까요.. 🧐?

지금까지 리액트를 처음 배우고 3개의 프로젝트를 진행하면서 그다지 의문을 갖지 않았었다.
하지만 점점 진행하는 프로젝트가 복잡해지면서 드는 의문이 있었다.
내가 만든 컴포넌트 구조가 옳은 것일까? 하는 의문.

오늘은 이러한 질문에서 시작되어 찾아본 자료들을 정리해본다.

1. 컴포넌트는 기능에 따라 2가지로 나뉜다

React Component를 구분하는 방식에는 여러가지가 있다.

Container / Presentational
Fat / Skinny
Stateful / Stateless
Smart / Dumb
Pure / Unpure
etc...

여러가지 구분이 있고 모두가 완벽히 같은 구분은 아니지만, 이렇게 이분하는 핵심은 하나다.
재사용성과 유지보수성을 높이기 위함이다.

리액트에서의 컴포넌트는 다양한 역할을 한다.
다양한 작업을 하나의 컴포넌트에서 처리한다면
가독성이 떨어지고 코드가 복잡해질 뿐더러 디버깅을 하거나 재사용하기 어렵다.
단순히 view와 action을 각각의 컴포넌트로 만든다고 생각하자.

다음은 리액트 개발자 Dan Abramov가 설명하는 Presentational Components와 Container Components을 기본 골조로 내가 사용했던 방법을 덧붙여 정리해보았다.

2. 컨테이너 & 프레젠테이셔널 컴포넌트

1) 컨테이너 컴포넌트 (Container Components): How things work.

A container does data fetching and then renders its corresponding sub-component. That's it.

• Action: 어떻게 작동하는지를 담당한다.
• 프레젠테이셔널과 컨테이너 컴포넌트를 포함하고 있을 수는 있지만 자체적인 스타일이나 DOM 마크업을 갖고 있지 않다.
• 데이터와 다른 컴포넌트에 대한 함수를 제공한다.
• data에 대한 state를 갖고 있으며 다른 프레젠테이셔널 컴포넌트에게 props로 데이터를 전달한다.

2) 프레젠테이셔널 컴포넌트 (Presentational Components): how things look.

• View: 어떻게 보이는지를 담당한다.
• useState, dispatch, useCallback 등을 사용하지 않는다. 다만 자체적인 UI에 대한 state는 가질 수 있다.(data에 대한 state는 제외)
• 프레젠테이셔널과 컨테이너 컴포넌트를 포함할 수 있고 자체적인 DOM 마크업과 스타일을 가지고 있다.
• this.props.children을 통해 다른 컴포넌트로부터 props를 넘겨받는다.
• 다른 컴포넌트에 대한 의존성이 없다.
• state, 라이프사이클 훅, 성능 최적화가 필요하지 않다면 functional components로 작성된다.

3. 역할을 분배하는 것의 장점?

한 달 정도 프레젠테이셔널 컴포넌트(이하 PC)와 컨테이너 컴포넌트(이하 CC)로 구분하여 프로젝트를 진행해 보았다. 앞서 제기한 의문과 더불어 디자인 패턴에 관심을 갖게 되면서, '간단하게 PC와 CC를 구분하는 것에서부터 출발해보자...'하는 생각에 시작한 것이었는데.

확실히 컴포넌트 작성에서부터 기능을 나눠서 생각하니 컴포넌트 재활용이 비교적 쉬워졌다고 해야할까...
전에는 '재사용성'을 늘려보고 싶다라는 생각으로 무작정 써놓았던 컴포넌트를 재사용했는데, 후에 컴포넌트 규모가 커지면서 점점 복잡해지는 로직으로 골머리를 앓았었다..🤧
하지만 컴포넌트 작성에서부터 컴포넌트의 목적과 기능을 중심으로 구분하여 재사용을 전제로 하고 출발하니 '이렇게 컴포넌트를 재사용하는 것인가..🤔?'라는 생각이 들 정도로 코드 작성이 보다 명확해진다.
다만 완벽하게 100% 분리하고는 있진 않다. 그 이유는, 1)컴포넌트를 분리한다고 해서 재사용할 수 있는 컴포넌트가 아닐 경우 혹은 2)기능과 UI가 밀접하게 관련이 있어서 분리하면 오히려 가독성이 떨어지는 경우가 있기 때문이다.

요즈음 컴포넌트 구조와 더불어 디렉토리 구조에 대한 고민도 하고 있는데,
이에 대한 내용은 어느 정도 프로젝트가 마무리되면 정리해서 올려볼까 한다.

참고자료
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.c26mmyryu
https://kyounghwan01.github.io/blog/React/container-presenter-dessign-pattern/#presentational-container-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80
https://blog.naver.com/backsajang420/221368885149