blog.bundles.dev

Redux를 사용하면서 아쉬웠던 것들

이 글은 Redux의 기초는 다루지 않습니다. 이 글을 읽기 전 과연 props는 어디까지 내려가는가을 읽으면 도움됩니다.

TL;DR

본론

아래는 Redux를 사용하면서 불편했던 점을 설명한다.

직관적이지 않는 로직

Redux는 기본 코드는 아래와 같다.

만약 Redux를 알지 못하는 사람이 위의 코드을 봤을 때 n이 1증가한다는 흐름을 정확히 알 수 있을까? 솔직히 난 처음에 이해하지 못했다. mapStateToProps, mapDispatchToProps의 인자(state, dispatch)가 어디서 입력되고 무엇이 입력되는지 이해하지 못했다. 그저 저렇게 사용해야되구나라고 생각했다.

처음에는 내가 이해력이 부족한 줄 알았지만 직장 동료들에게 이런 일이 있었다고 말하니 나와 같은 사람이 꽤 많았다.

필요하지 않은 빈 상태 데이터

만약 아래와 같은 요구사항을 가지고 있는 게시판을 구현한다고 생각하자.

Redux을 사용한다면 InitState를 아래와 같이 설정할 수 있다.

하지만 posts는 /posts 페이지에서만 쓸모있고 /posts/:postID 페이지에서는 없어도 되는 상태이다. 현재는 2개의 페이지만 있지만 admin 어플리케이션과 같이 페이지는 많고 한 페이지에 사용하는 상태는 적다면 빈 상태 데이터는 많아질 것이다.

필요없는 빈 상태 데이터가 많아 NEXT.js + Redux DevTools에서 디버깅하기 불편했고 가독성도 떨어졌다.

결론

Redux는 장점도 있지만 역시 단점도 있다. 하지만 러닝 커브가 크다는 단점은 학습으로 커버할 수 있고 필요하지 않은 빈 상태 데이터는 State 설계를 잘하면 피해갈 수 있다. 그리고 Redux를 잘 사용하면 어플리케이션를 더 쉽게 구현할 수 있다. 예를 들어 container에는 비즈니스 로직을 구현하고 백엔드와 통신하는 부분은 slice 모듈에 구현한다는 패턴이 생겨 다른 개발자들이 예상 가능한 코딩을 할 수 있어 높은 가독성과 생산성을 보장할 수 있다.


English

Things that were inconvenient while using Redux

외부 포스트

DEV