기존의 Container Presenter 방식의 리액트
현재 작업하는 리액트 프로젝트는 Next js를 기반으로 각 페이지마다 컨테이너 프레젠터 구조로 이루어져 있다. 컨테이너에서는 로직부분을 담당하고 프레젠터에 내려주며, 프레젠터는 받은 로직에 따라 UI로 보여주고 있다. 이렇게 함으로써 로직을 상단에서 처리하고 컴포넌트에서는 UI 만 담당하므로 각 컴포넌트가 어떤 역할을 하는지 이해하기가 쉽다.
하지만, 프로젝트가 커지고 점점 기능을 추가해야 되면서 컨테이너 쪽에서 모든 비즈니스 로직을 처리하기엔 너무 복잡해지고 무거워지고 있다. 그리고 컨테이너쪽에서 리액트 상태를 관리하게 되므로 상태가 업데이트 될 때 해당 상태와 무관한 다른 하위 컴포넌트까지 불 필요 렌더링이 이루어지고 있다.
거기다가 비동기 처리까지 담당하여 Presenter로 내려주게 된다면 컨테이너가 기본 몇백줄부터 시작하게 되서 이런 구조를 바꿔야 할 필요성을 느끼고 있었다.
컴포넌트에서 로직을 분리하는 것에 얽매이지 말자
컨테이너 프레젠터 구조를 사용하면서 확실히 로직의 분리는 큰 장점이다. 그래서 이러한 장점 때문에 계속 레거시를 유지보수하며 유지해왔지만 성능상의 문제점이나, 큰 프로젝트에서의 힘든 관리는 너무 큰 단점이였다.
이러한 상황에서 SWR 라이브러리를 사용해보면서 컴포넌트에서의 props 전달을 최소화하고 비동기 처리 로직의 쉬운 분리, 낮은 복잡도가 “로직을 해당 컴포넌트에서 분리하는게 관리하기 편하다.” 편견을 깨주었다.
각각의 컴포넌트에서 사용하는 로직을 최소한의 코드로 맡아서 처리하게 되므로 컨테이너와 같이 특정 파일만 무거워지는 현상도 줄어들게 되었고, 설령 큰 프로젝트라 하더라도 중복되는 로직을 커스텀 훅으로 관리하면 많은 복잡도를 줄일 수 있었다. 실제로 리액트에서도 리액트 hook에서 커스텀 hook에 대한 방법을 문서로 제시하고 있다.